Untitled

import HtmlEditor from './HtmlEditor.js';
import AdvListEditor from './AdvListEditor.js';

export default {
    template: `
        <v-row id="global">
            <v-col cols="8">
                <v-form ref="config" >
                    <h1 class="display-2">Global</h1>
                    <h1 class="display-1">Configuration</h1>
                    <v-row no-gutters>
                        <v-col>
                            <v-text-field outlined
                                v-model.trim="localFormFields.companyName"
                                clearable
                                persistent-hint
                                class="my-5"
                                label="Name Your Configuration"
                                hint="Use the company Name for easy of matching"
                                autocomplete="off"
                                :rules="rules.name"
                            >
                            </v-text-field>
                        </v-col>
                        <v-col>
                            <v-text-field
                                v-model.trim="localFormFields.zipCode"
                                outlined
                                clearable
                                persistent-hint
                                class="my-5"
                                label="Company Zipcode"
                                hint="Company Location Zipcode"
                                autocomplete="off"
                                :rules="rules.zipcode"
                            >
                            </v-text-field>
                        </v-col>
                    </v-row>
                    
                    <v-row no-gutters>
                        <v-col>
                            <v-select 
                                        v-model="localFormFields.companyIdentificatorType"
                                        outlined
                                        flat
                                        label="Choose Type:"
                                        autocomplete="off"
                                        :rules="rules.type"
                                        :items="customizationPatternOptions"
                                        :item-value="customizationPatternOptions.value"
                                        :item-text="customizationPatternOptions.text"
                                        >
                            </v-select>
                        </v-col>
                        <v-col>
                            <v-text-field 
                                            v-model.trim="localFormFields.companyIdentificator"                                            
                                            outlined
                                            clearable
                                            persistent-hint
                                            label="Company Identificator"
                                            hint="Choose your identificator and its type ie: partnerID, enrollment code or url."
                                            autocomplete="off"
                                            v-on:input="applyEnrollmentMask"
                                            :rules="companyIdRulesPerType"
                                            :disabled="localFormFields.companyIdentificatorType <= 0 || localFormFields.companyIdentificatorType === null"
                                            >
                            </v-text-field>
                        </v-col>
                    </v-row>
                </v-form>

                <v-form ref="editForm"> 
                        <section v-if="isEdit">
                            <h1 class="display-1">Content Across Steps</h1>
                            <v-file-input outlined
                                chips
                                show-size
                                v-model="selectedLogoLocal"
                                prepend-inner-icon="mdi-image-search-outline"
                                label="Company Logo Image"
                                accept="image/*"
                                v-on:change="handleImageSelection"
                                @@click:clear="handleImageSelection"
                                :disabled="companyIdentificatorType !== 1"
                                >
                            </v-file-input>
                            <v-text-field outlined
                                clearable
                                persistent-hint
                                type="number"
                                v-on:change="sendImageWidth"
                                v-on:keyup="sendImageWidth"
                                v-model="companyLogoMaxWidth"
                                ref="logowidth"
                                label="Company Logo Max Image width"
                                hint="Number of pixels horizontally max value "
                                :disabled="companyIdentificatorType !== 1"
                                :rules=" selectedLogoLocal ? [requiredNumber]:[nonRequiredNumber]"
                                >
                                <template v-slot:append>
                                    <span>pixels</span>
                                </template>
                            </v-text-field>
                            <v-text-field outlined
                                clearable
                                persistent-hint
                                label="Support Number"
                                v-on:input="applyPhoneMask"
                                @@click:clear="applyPhoneMask"
                                :rules="rules.phone"
                                v-model.trim="companySupportNumber"
                                :hint="'Default: ' + defaultDynamicContent.companySupportNumber"
                                >
                            </v-text-field>

                            <h1 class="display-1">Footer Content Global</h1>
                            <h3>Terms and conditions</h3>
                            <v-text-field v-model.trim="companyTermsAndConditionsLinkText"
                                outlined
                                clearable
                                persistent-hint
                                label="Terms and Conditions Action Link Text "
                                :hint="'Default: ' + defaultDynamicContent.companyTermsAndConditionsLinkText"
                                >
                            </v-text-field>
                            <v-text-field v-model.trim="companyTermsAndConditionsLink"
                                outlined
                                clearable
                                persistent-hint
                                label="Url "
                                :rules="[urlRule]"
                                :hint="'Default: ' + defaultDynamicContent.companyTermsAndConditionsLink">
                            </v-text-field>
                            <h3>Privacy Policy</h3>
                            <v-text-field v-model.trim="companyPrivacyPolicyLinkText"
                                outlined
                                clearable
                                persistent-hint
                                label="Privacy Policy Action Link Text "
                                :hint="'Default: ' + defaultDynamicContent.companyPrivacyPolicyLinkText">
                            </v-text-field>
                            <v-text-field v-model.trim="companyPrivacyPolicyLink"
                                outlined
                                clearable
                                persistent-hint
                                label="Url "
                                :hint="'Default: ' + defaultDynamicContent.companyPrivacyPolicyLink">
                            </v-text-field>

                            <h1 class="display-1">Footer Text </h1>

                            <html-editor variable="companyFooterFootnote1Html" :hint="this.defaultDynamicContent.companyFooterFootnote1Html" :input="companyFooterFootnote1Html" title="Footnote 1" v-on:html-updated="getQuillPayload"></html-editor>
                            <html-editor variable="companyFooterFootnote2Html" :hint="this.defaultDynamicContent.companyFooterFootnote2Html" :input="companyFooterFootnote2Html" title="Footnote 2" v-on:html-updated="getQuillPayload"></html-editor>
                            <html-editor variable="companyFooterFootnote3Html" :hint="this.defaultDynamicContent.companyFooterFootnote3Html" :input="companyFooterFootnote3Html" title="Footnote 3" v-on:html-updated="getQuillPayload"></html-editor>
                            <html-editor variable="companyFooterFootnote4Html" :hint="this.defaultDynamicContent.companyFooterFootnote4Html" :input="companyFooterFootnote4Html" title="Footnote 4" v-on:html-updated="getQuillPayload"></html-editor>
                            <html-editor variable="companyFooterFootnote5Html" :hint="this.defaultDynamicContent.companyFooterFootnote5Html" :input="companyFooterFootnote5Html" title="Footnote 5" v-on:html-updated="getQuillPayload"></html-editor>                      

                        </section>
                </v-form>
            </v-col>
        </v-row>
    `,
    computed: {
        isEdit: function () {
            return this.$store.getters.getIsEdit;
        },
        defaultDynamicContent: function () {
            return this.$store.getters.getDefaultDynamicContent.DynamicJson;
        },
        dynamicContent: function () {
            return this.$store.getters.getDynamicContent.DynamicJson;
        },
        companyName: {
            get() {
                return this.$store.getters.getDynamicContent.DynamicJson.companyName;
            },
            set(value) {
                this.$store.commit('updateDynamicContentProperty', { companyName: value });
            }
        },
        zipCode: {
            get() {
                return this.$store.getters.getDynamicContent.DynamicJson.zipCode;
            },
            set(value) {
                this.$store.commit('updateDynamicContentProperty', { zipCode: value });
            }
        },
        companyIdentificatorType: {
            get() {
                return this.$store.getters.getDynamicContent.DynamicJson.companyIdentificatorType;
            },
            set(value) {
                this.$store.commit('updateDynamicContentProperty', { companyIdentificatorType: value });
            }
        },
        companyIdentificator: {
            get() {
                if(this.$store.getters.getDynamicContent.DynamicJson.companyIdentificator !== ''){                    
                    this.localFormFields.companyIdentificator = this.$store.getters.getDynamicContent.DynamicJson.companyIdentificator;
                }
                return this.$store.getters.getDynamicContent.DynamicJson.companyIdentificator;
            },
            set(value) {
                this.$store.commit('updateDynamicContentProperty', { companyIdentificator: value });
            }
        },
        companyLogo: {
            get() {
                return this.$store.getters.getDynamicContent.DynamicJson.companyLogo;
            },
            set(value) {
                this.$store.commit('updateDynamicContentProperty', { companyLogo: value });
            }
        },
        companyLogoMaxWidth: {
            get() {
                return this.$store.getters.getDynamicContent.DynamicJson.companyLogoMaxWidth;
            },
            set(value) {
                this.$store.commit('updateDynamicContentProperty', { companyLogoMaxWidth: value });
            }
        },
        companySupportNumber: {
            get() {
                return this.$store.getters.getDynamicContent.DynamicJson.companySupportNumber;
            },
            set(value) {
                this.$store.commit('updateDynamicContentProperty', { companySupportNumber: value });
            }
        },
        companyTermsAndConditionsLinkText: {
            get() {
                return this.$store.getters.getDynamicContent.DynamicJson.companyTermsAndConditionsLinkText;
            },
            set(value) {
                this.$store.commit('updateDynamicContentProperty', { companyTermsAndConditionsLinkText: value });
            }
        },
        companyTermsAndConditionsLink: {
            get() {
                return this.$store.getters.getDynamicContent.DynamicJson.companyTermsAndConditionsLink;
            },
            set(value) {
                this.$store.commit('updateDynamicContentProperty', { companyTermsAndConditionsLink: value });
            }
        },
        companyPrivacyPolicyLinkText: {
            get() {
                return this.$store.getters.getDynamicContent.DynamicJson.companyPrivacyPolicyLinkText;
            },
            set(value) {
                this.$store.commit('updateDynamicContentProperty', { companyPrivacyPolicyLinkText: value });
            }
        },
        companyPrivacyPolicyLink: {
            get() {
                return this.$store.getters.getDynamicContent.DynamicJson.companyPrivacyPolicyLink;
            },
            set(value) {
                this.$store.commit('updateDynamicContentProperty', { companyPrivacyPolicyLink: value });
            }
        },
        companyFooterFootnote1Html: {
            get() {
                return this.$store.getters.getDynamicContent.DynamicJson.companyFooterFootnote1Html;
            },
            set(value) {
                this.$store.commit('updateDynamicContentProperty', { companyFooterFootnote1Html: value });
            }
        },
        companyFooterFootnote2Html: {
            get() {
                return this.$store.getters.getDynamicContent.DynamicJson.companyFooterFootnote2Html;
            },
            set(value) {
                this.$store.commit('updateDynamicContentProperty', { companyFooterFootnote2Html: value });
            }
        },
        companyFooterFootnote3Html: {
            get() {
                return this.$store.getters.getDynamicContent.DynamicJson.companyFooterFootnote3Html;
            },
            set(value) {
                this.$store.commit('updateDynamicContentProperty', { companyFooterFootnote3Html: value });
            }
        },
        companyFooterFootnote4Html: {
            get() {
                return this.$store.getters.getDynamicContent.DynamicJson.companyFooterFootnote4Html;
            },
            set(value) {
                this.$store.commit('updateDynamicContentProperty', { companyFooterFootnote4Html: value });
            }
        },
        companyFooterFootnote5Html: {
            get() {
                return this.$store.getters.getDynamicContent.DynamicJson.companyFooterFootnote5Html;
            },
            set(value) {
                this.$store.commit('updateDynamicContentProperty', { companyFooterFootnote5Html: value });
            }
        },
        companyAdditionalFooterFootnotesHtml: {
            get() {
                return this.$store.getters.getDynamicContent.DynamicJson.companyAdditionalFooterFootnotesHtml;
            },
            set(value) {
                this.$store.commit('updateDynamicContentProperty', { companyAdditionalFooterFootnotesHtml: value });
            }
        },

        //Rules
        urlRule(){
            return (value)  => {
                if(!value) return true;
                const urlPattern = /^(http[s]?:\/\/)?(www\.)?([a-zA-Z0-9.-]+)(\.[a-zA-Z0-9.-]+)(\.[a-zA-Z]{2,})(\/\S*)?$/;
                if(!urlPattern.test(value)) return "Please enter a valid url";
                return true;
            };
        }, 
        requiredNumber(){
            return (value) => {
                if( value !== null && value >= 1 && value  !== undefined && value !== ""){
                    this.logoMaxWidthValid = true;
                    this.sendValidatedImage();
                    return true;
                }
                this.logoMaxWidthValid = false;
                this.sendValidatedImage();
                return "When a logo is selected, This field becomes required and cannot be 0";
            };
        },
        partnerLogoSource: function () {
            return this.$store.getters.getPartnerLogoSource;
        },
        nonRequiredNumber(){
                this.logoMaxWidthValid = true;
                this.sendValidatedImage();
                return true;
        },
        companyIdRulesPerType(){
            switch(this.localFormFields.companyIdentificatorType){
                case 1: 
                return [
                    v => v != null || 'PartnerID is required', // Checks for null or undefined
                    v => v == null || !!v.trim() || 'PartnerID is required', // Checks for empty strings
                    v => v == null || /^\d+$/.test(v) || 'PartnerID must contain only numbers',
                    v => v == null || !/\s/.test(v) || 'PartnerID No spaces allowed',
                    v => v == null || (v.length >= 4 || 'PartnerID Must be longer than 4 digits'),
                    v => v == null || (v.length <= 7 || 'PartnerID Must be Shorter than 7 digits'),
                    v => v == null || (!isNaN(parseFloat(v)) && isFinite(v) && v > 0 || 'PartnerID must be a positive number')
                ];
                case 2: 
                return [
                    v => v != null || 'Enrollment is required', // Checks for null or undefined
                    v => v == null || !!v.trim() || 'Enrollment is required', // Checks for empty strings
                    v => /^[0-9-]*$/.test(v) && !v.includes('--') && !v.startsWith('-') && !v.endsWith('-') || 'Invalid format',
                    v => v.length === 13 || 'Enrollment Must be in 13 characters long'
                ];
                case 3: 
                return [
                    v => v != null || 'Url is required', // Checks for null or undefined
                    v => v == null || !!v.trim() || 'Url is required', // Checks for empty strings
                    v => /^[a-zA-Z0-9]*$/.test(v) || 'Url  should only contain letters and numbers',
                    v => !/\s/.test(v) || 'Url Must not contain spaces'
                ];
                default:
                    return [];
            }
        }

    },
    components: {
        'html-editor': HtmlEditor,
        'adv-list-editor': AdvListEditor
    },
    
    data() {
        return {
            customizationPatternOptions: [
                { text: 'Select a type', value: -1 },
                { text: 'Partner ID', value: 1 },
                { text: 'EnrollmentCode', value: 2 },
                { text: 'Url', value: 3 },
            ], 
            validInitialConfiguration: false,
            validCustomization: true,
            rules: {
                name: [val => (val || '').length > 0 || 'Your configuration name is required'],
                type: [
                    v => !!v || 'Your configuration type is required',
                    v => v > 0 || 'You must have a valid selection' ,
                ],
                id: [
                    v => !!v || 'This field is required',
                    v => /^[0-9-]*$/.test(v) && !v.includes('--') && !v.startsWith('-') && !v.endsWith('-') || 'Invalid format',
                ],
                zipcode: [
                    v => !!v || 'zip code is required', 
                    v => /(^\d{5}$)|(^\d{5}-\d{4}$)/.test(v) || 'Invalid zip code format',
                ],
                phone: [
                    v => /^\d{3}-\d{3}-\d{4}$/.test(v) || 'Phone number must be in XXX-XXX-XXXX format', // Format rule
                    v => (v && v.length === 12) || 'Phone number must be 12 characters long' // Length rule
                ]
            },

            selectedLogoLocal: null,            
            logoMaxWidthValid: true,
            localFormFields: {
                companyName: '', 
                companyIdentificatorType: -1,
                companyIdentificator:'', 
                zipCode: '', 
            }

        };
    },
    watch: {
        localFormFields: {
            handler() {
                this.checkValidInitialConfiguration();
            },
            deep: true,
        },
        selectedLogoLocal(newValue, oldValue){
            if(newValue){   
                this.$refs.logowidth.$el.querySelector('input').focus();
            }
        }, 
        logoMaxWidthValid(newValue){
            if(newValue){   
                this.sendValidatedImage();
            }
        },
        companyName(newValue){
            this.localFormFields.companyName = newValue;
        },
        companyIdentificatorType(newValue){
            this.localFormFields.companyIdentificatorType = newValue;
        }, 
        companyIdentificator(newValue){
            this.localFormFields.companyIdentificator = newValue;
        },
        zipCode(newValue){
            this.localFormFields.zipCode = newValue;
        }
    },
    created() {
        if(this.isEdit){
            this.localFormFields.companyName = this.companyName;
            this.localFormFields.companyIdentificatorType = this.companyIdentificatorType;
            this.localFormFields.companyIdentificator = this.companyIdentificator;
            this.localFormFields.zipCode = this.zipCode;
            this.sendImageWidth();
        }
    },
    mounted() {
        if(this.isEdit){
            console.log('mounted')
            this.checkValidInitialConfiguration();
        }
    },
    methods: {
        async checkValidInitialConfiguration(){
            await new Promise(resolve => setTimeout(resolve, 1000));
            this.validInitialConfiguration = this.$refs.config.validate();           
            console.log('cheking initial config '+ this.validInitialConfiguration )

            if (this.validInitialConfiguration){
                this.companyName = this.localFormFields.companyName;
                this.zipCode = this.localFormFields.zipCode ;
                this.companyIdentificatorType = this.localFormFields.companyIdentificatorType;
                this.companyIdentificator = this.localFormFields.companyIdentificator;
            }
            this.sendValidatedConfiguration();

        },
        async checkCustomizationData(){
            this.validCustomization = this.$refs.editForm.validate();
        },
        handleImageSelection() {
            let testLogo = this.selectedLogoLocal
            if (this.selectedLogoLocal) {
                this.$store.commit("setPartnerLogoFile", this.selectedLogoLocal);

                const reader = new FileReader();
                reader.readAsDataURL(this.selectedLogoLocal);

                reader.onload = () => {
                    this.$store.commit("setPartnerLogoSource", reader.result);
                };

                this.$store.commit('setLogoChanged', true);
            }
            else{
                this.$store.commit("setPartnerLogoSource", '');
                this.$store.commit("setPartnerLogoFile", null);
                this.$store.commit('setLogoChanged', false);
            }
        },      
        sendImageWidth(){
            this.$emit('image-width-updated', this.companyLogoMaxWidth );
        },
        sendInitConfiguration(){
            this.$emit('configuration-update', {
                name: this.companyName,
                type: this.companyIdentificatorType,
                id: this.companyIdentificator
            });
        },
        sendValidatedConfiguration(){
            this.$emit('configuration-valid', this.validInitialConfiguration);  
        },
        async sendValidatedImage(){
            this.$emit('image-valid', this.logoMaxWidthValid);
        },
        async applyEnrollmentMask(event) {
            if(this.localFormFields.companyIdentificatorType === 2){
                let value = this.localFormFields.companyIdentificator.replace(/\D/g, ''); // Remove non-digits
                let maskedValue = '';
          
                for (let i = 0; i < value.length; i++) {
                  if (i === 2 || i === 4 || i === 6) {
                    maskedValue += '-'; // Add dash at specified positions
                  }
                  maskedValue += value[i];
                }
          
                // Limit the length to match the mask
                this.localFormFields.companyIdentificator = maskedValue.substring(0, 13);
                this.checkValidInitialConfiguration;
            }
        },
        async sendValidatedPhone(){
            this.$emit('image-valid', this.validCustomization);
        },
        async applyPhoneMask(event) {
            await new Promise(resolve => setTimeout(resolve, 500));
            if(this.companySupportNumber !== '' && this.companySupportNumber !== null){
                console.log("may not empty");

                let value = this.companySupportNumber.replace(/\D/g, ''); // Remove non-digits
                let maskedValue = '';
            
                for (let i = 0; i < value.length; i++) {
                  if (i === 3 || i === 6) { // Add dash after 3rd and 6th character
                    maskedValue += '-';
                  }
                  maskedValue += value[i];
                }
            
                // Limit the length to match the US phone number mask (12 characters)
                this.companySupportNumber = maskedValue.substring(0, 12);
  
                await this.checkCustomizationData();
                this.sendValidatedPhone();
            }else{

                console.log("may be empty");
                console.log(this.companySupportNumber);
                this.validCustomization = true;
                this.sendValidatedPhone();
            }
        }
          
          
       
    }
}