import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { ModalConfig } from 'src/app/interfaces/common-interfaces';
import { ModalInterface } from 'src/app/interfaces/modal-interface';
import { AccountInfoService } from 'src/app/services/accountInfo/account-info.service';

@Component({
  standalone: false,
    selector: 'app-quick-survey-question-popup',
    templateUrl: './quick-survey-question-popup.component.html',
    styleUrls: ['./quick-survey-question-popup.component.scss']
})
export class QuickSurveyQuestionPopupComponent implements OnInit, ModalInterface {
    contactMethod!: string;

    /* Modal Config */
    quickSurveyQuestionConfig: ModalConfig = {
        title: 'Quick Survey Question',
        showHeader: true,
        showClose: true
    }

    modalComponent!: NgbModalRef;

    quickSurveyForm: FormGroup = new FormGroup({});

    formSubmitted: boolean = false;
    
    disableBtn: boolean = true;

    constructor(public modalService: NgbModal, private accountInfoService: AccountInfoService, private formBuilder: FormBuilder) { }

    /**
     * Open Quick Survey Question Popup
     * @returns void
     */
    openModal(): void {
        this.modalComponent = this.modalService?.open(QuickSurveyQuestionPopupComponent, {size: 'sm'});
        this.modalComponent.shown.subscribe(() => {
            localStorage.setItem('QSQPopupShown', 'shown');
        });
    }

    /**
     * Close Quick Survey Question Popup
     */
    closeModal(): void {
        this.modalService.dismissAll()
    }

    setData(data: any): void {
    }

    /**
     * Initialize Quick Survey Question Popup
     */
    ngOnInit(): void {
        this.quickSurveyForm = this.formBuilder.group({
            contact_method: [''],
            text_msg_phone_number: ['', []],
            agree_text_msg_terms: [''],
            contact_value_email: ['', []],
            contact_value: ['', []],
        });
    }

    /**
     * Submit Quick Survey Question Contact Information
     * @param object formName
     * @param object surveyData
     * @returns void
    */
    submitQSQContactInfo () {
        this.formSubmitted = true;
        if (this.contactMethod === 'Text' && !this.quickSurveyForm.get('agree_text_msg_terms')?.value) {
            this.quickSurveyForm.get('agree_text_msg_terms')?.setErrors({required: true});
            this.quickSurveyForm.get('agree_text_msg_terms')?.markAsTouched();
        }
        if (!this.quickSurveyForm.invalid && (this.contactMethod !== "" && this.contactMethod !== undefined)) {
            let contactValue = '';
            this.quickSurveyForm.get('contact_value')?.value;
            let fieldName = this.quickSurveyForm.get('contact_method')?.value;
            if (fieldName !== 'None') {
                contactValue = this.quickSurveyForm.get(fieldName)?.value;
            }
            this.accountInfoService.saveQSQContactInfo({
                action : 'quickSurveyQuestion',
                contact_method : this.contactMethod,
                contact_value  : contactValue
            }).subscribe();
            this.closeModal();
        }
    };

    /**
     * Set contact method and required validators for fields basing on
     * the contacted method set.
     * @param contactMethod 
     */
    setContactMethod (contactMethod: string) {
        this.disableBtn = false;
        this.contactMethod = contactMethod;
        this.formSubmitted = false;
        this.quickSurveyForm.get('text_msg_phone_number')?.setValidators(null);
        this.quickSurveyForm.get('text_msg_phone_number')?.setErrors(null);
        this.quickSurveyForm.get('text_msg_phone_number')?.markAsUntouched();
        this.quickSurveyForm.get('agree_text_msg_terms')?.setValidators(null);
        this.quickSurveyForm.get('agree_text_msg_terms')?.setErrors(null);
        this.quickSurveyForm.get('agree_text_msg_terms')?.markAsUntouched();
        this.quickSurveyForm.get('contact_value_email')?.setValidators(null);
        this.quickSurveyForm.get('contact_value_email')?.setErrors(null);
        this.quickSurveyForm.get('contact_value_email')?.markAsUntouched();
        this.quickSurveyForm.get('contact_value')?.setValidators(null);
        this.quickSurveyForm.get('contact_value')?.setErrors(null);
        this.quickSurveyForm.get('contact_value')?.markAsUntouched();
        if (contactMethod == 'Text') {
            this.quickSurveyForm.get('text_msg_phone_number')?.setValidators([
                Validators.required,
                Validators.pattern(/^(\d{3}-\d{3}-\d{4}|\d{10})$/)
            ]);
            this.quickSurveyForm.get('agree_text_msg_terms')?.setValidators([
                Validators.required
            ]);
        } else if (contactMethod == 'Email') {
            this.quickSurveyForm.get('contact_value_email')?.setValidators([
                Validators.required,
                Validators.pattern(/^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/)
            ]);
        } else if (contactMethod == 'Phone') {
            this.quickSurveyForm.get('contact_value')?.setValidators([
                Validators.required,
                Validators.pattern(/^(\d{3}-\d{3}-\d{4}|\d{10})$/)
            ]);
        }
    }
}