<template>
    <fieldset class="idCheck" v-if="basket.require_id_check_cascade">
        <h6>ID Check</h6>

        <div class="row">
            <p class="error">
                Unfortunately your identity could not be verified using given data.
                Please fill out the additional information to confirm your identity.
            </p>

            <!-- ID Document Type -->
            <div
                class="row"
                :class="{ 'errorWrap showError': hasError('info.id_type') }"
            >
                <label for="cardholder_id_ty">
                    ID Document Type<sup>*</sup>
                </label>

                <div class="inputWrap">
                    <chosen
                        :options="idCheckData.idOptions"
                        placeholder="Please select"
                        :value="basket.info.id_type"
                        @input="onIdTypeChange"
                        class="selectIdType"
                        id="cardholder_id_ty"
                        name="cardholder_id_ty"
                        label="label"
                        track-by="id"
                    />
                </div>

                <div class="validationMessage" v-if="hasError('info.id_type')">
                    <span>{{ errors.info.id_type }}</span>
                </div>
            </div>

            <!-- ID Check Fields -->
            <div
                class="row idCheckFieldsSection"
                v-if="basket.info.id_type"
                :class="{ 'errorWrap showError': hasError('info.id_number') }"
            >
                <div class="innerIdCheckFields">
                    <div class="multiRowLabel">
                        <label>
                            <span v-if="basket.info.id_type === 'drivers_license'">Drivers License ID Number</span>
                            <span v-if="basket.info.id_type === 'passport'">Passport ID Number</span>
                            <span v-if="basket.info.id_type === 'id_card'">ID Card Number</span>
                            <sup>*</sup>
                        </label>

                        <div class="idHelpLinkWrap">
                            <a
                                class="passportHelpLink transparentOverlay"
                                :href="idHelpImageUrl"
                                target="_blank"
                            >
                                <font-awesome-icon :icon="['far', 'info-circle']" aria-hidden="true" /> Where can I find this?
                            </a>
                        </div>
                    </div>

                    <!-- Passport Fields -->
                    <id-check-fields
                        v-if="basket.info.id_type === 'passport'"
                        type="passport"
                        :fields="idCheckData.passport"
                        :example-text="'107185702 2 GBR 8501178 F 1601312 &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt; 02'"
                        @clear-error="clearError('errors.info.id_number')"
                        @update-field="onFieldUpdate"
                        @validate-field="onFieldValidate"
                        @build-id-number="buildIdNumber"
                    />

                    <!-- Drivers License Fields -->
                    <id-check-fields
                        v-if="basket.info.id_type === 'drivers_license'"
                        type="drivers_license"
                        :fields="idCheckData.drivers_license"
                        example-text="MORGA 753116 SM9IJ"
                        @clear-error="clearError('errors.info.id_number')"
                        @update-field="onFieldUpdate"
                        @validate-field="onFieldValidate"
                        @build-id-number="buildIdNumber"
                    />

                    <!-- ID Card Fields -->
                    <id-check-fields
                        v-if="basket.info.id_type === 'id_card'"
                        type="id_card"
                        :fields="idCheckData.id_card"
                        :example-text="'ID GBR 1234567897 &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt; 7704145 F 1604117 GBR &lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt; 4'"
                        @clear-error="clearError('errors.info.id_number')"
                        @update-field="onFieldUpdate"
                        @validate-field="onFieldValidate"
                        @build-id-number="buildIdNumber"
                    />

                    <!-- Hidden ID Number Field -->
                    <div class="row hiddenIdRow">
                        <input
                            type="hidden"
                            name="cardholder_id_number"
                            id="cardholder_id_number"
                            :value="basket.info.id_number"
                            placeholder="ID Number"
                        />

                        <div class="error" v-if="hasError('info.id_number')">
                            <span>{{ errors.info.id_number }}</span>
                        </div>

                        <div
                            class="error"
                            v-if="!hasError('info.id_number') && idCheckData.showErrors"
                        >
                            <p>
                                The ID number you have entered appears to be incorrect.
                                Please ensure you have entered the number exactly
                                as it appears on your ID.
                            </p>
                            <p>
                                Please use the "Where can I find this" link
                                above for help finding the ID number.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</template>

<script>
import IdCheckFields from './id_check_fields.vue';
import errorMixin from '../shared/error_mixin.js';

export default {
    name: 'id-check',

    mixins: [errorMixin],

    components: {
        IdCheckFields
    },

    props: {
        basket: {
            type: Object,
            required: true
        },
        idCheckData: {
            type: Object,
            required: true
        },
        errors: {
            type: Object,
            default: () => ({})
        },
        memberVerified: {
            type: Boolean,
            default: false
        },
        themePath: {
            type: String,
            default: '/sites/default'
        }
    },

    computed: {
        idHelpImageUrl() {
            return `${this.themePath}/images/id_check/${this.basket.info.id_type}.png`;
        }
    },

    methods: {
        clearError(path) {
            this.$emit('clear-error', path);
        },

        onIdTypeChange(value) {
            this.$emit('update-field', { path: 'info.id_type', value });
            // Clear the ID number when type changes
            this.$emit('clear-id-number', value);
        },

        onFieldUpdate({ type, index, value }) {
            this.$emit('update-id-field', { type, index, value });
        },

        onFieldValidate({ type, index, isValid }) {
            // Validation is handled in the fields component
        },

        buildIdNumber(type) {
            this.$emit('build-id-number', type);
        }
    }
};
</script>
