// Angular Core
import { Component, Input, OnInit, Output, EventEmitter, SimpleChanges } from '@angular/core';
import { FormGroup, ControlContainer } from '@angular/forms';

// Components
import { StoreInfoComponent } from '../store-info.component';
import { GetStates } from 'src/app/interfaces/user/get-states';

@Component({
  standalone: false,
  selector: 'app-billing-address-tab',
  templateUrl: './billing-address-tab.component.html',
  styleUrls: ['./billing-address-tab.component.scss', '../store-info.component.scss']
})
export class BillingAddressTabComponent implements OnInit {

    @Input() isBillingCollapsed: boolean = false;
    @Output() isBillingCollapsedChange = new EventEmitter<boolean>();

    @Input() userStoreInfoForm: any = FormGroup;
    @Input() phnValidationMsg: string = '';
    @Input() zipValidationMsg: string = '';
    @Input() generalValidationMsg: string = '';
    @Input() cityValidationMsg: string = '';
    @Input() selectBoxValidationMsg: string = '';
    @Input() states!: GetStates['data'];

    ngOnChanges(changes: SimpleChanges): void {
    }

    @Output() update_user_data = new EventEmitter<string>();
    updateUserData(userEleName: string) {
        this.update_user_data.emit(userEleName);
    }

    @Output() clear_billing_section = new EventEmitter();
    clearBillingSection() {
        this.clear_billing_section.emit();
    }

    @Output() billing_same_as_legal_addr = new EventEmitter();
    billingSameAsLegalAddr() {
        this.billing_same_as_legal_addr.emit();
    }

    constructor(private controlContainer: ControlContainer, public storeInfo: StoreInfoComponent) { }

    ngOnInit(): void {
        this.userStoreInfoForm = <FormGroup>this.controlContainer.control;
    }

    get userStoreInfoFormData() { return this.userStoreInfoForm.controls; }

    collapseTab() {
        this.isBillingCollapsedChange.emit(!this.isBillingCollapsed);
    }

}