<template>
    <fieldset class="personalDetails">
        <!-- ID Check Warning -->
        <div class="row" v-if="basket.require_id_check && !memberIsVerified">
            <div class="alert complyMessage">
                <span>
                    Please enter your first and last name exactly as it appears on your ID.
                    This is to allow an ID verification.
                </span>
            </div>
        </div>

        <!-- Gender -->
        <div
            class="row"
            :class="{ 'errorWrap': hasError('address.billing.gender') }"
        >
            <label for="billingGender">
                Gender<sup>*</sup>
            </label>
            <div class="inputWrap">
                <select-field
                    :options="genders"
                    placeholder="Choose Gender"
                    :value="basket.address.billing.gender"
                    @input="onGenderChange"
                    class="selectGender"
                    id="billingGender"
                    name="basket[address][billing][gender]"
                />
            </div>
            <div class="validationMessage" v-if="hasError('address.billing.gender')">
                <span>{{ errors.address.billing.gender }}</span>
            </div>
        </div>

        <!-- First Name -->
        <div
            class="row"
            :class="{ 'errorWrap': hasError('address.billing.firstname') }"
        >
            <label for="billingFirstname">
                First Name<sup>*</sup>
            </label>
            <div class="inputWrap">
                <input
                    maxlength="20"
                    type="text"
                    name="cardholder_first_name"
                    id="billingFirstname"
                    @focus="clearError('address.billing.firstname')"
                    :value="basket.address.billing.firstname"
                    @input="updateField('address.billing.firstname', $event.target.value)"
                    class="text"
                />
            </div>
            <div class="validationMessage" v-if="hasError('address.billing.firstname')">
                <span>{{ errors.address.billing.firstname }}</span>
            </div>
        </div>

        <!-- Middle Name (for ID check) -->
        <div
            class="row"
            :class="{ 'errorWrap': hasError('address.billing.middle_name') }"
            v-if="basket.require_id_check_cascade"
        >
            <label for="billingMiddlename">
                Middle Name
            </label>
            <div class="inputWrap">
                <input
                    maxlength="20"
                    type="text"
                    name="cardholder_middle_name"
                    id="billingMiddlename"
                    @focus="clearError('address.billing.middle_name')"
                    :value="basket.address.billing.middle_name"
                    @input="updateField('address.billing.middle_name', $event.target.value)"
                    class="text"
                />
            </div>
            <div class="validationMessage" v-if="hasError('address.billing.middle_name')">
                <span>{{ errors.address.billing.middle_name }}</span>
            </div>
        </div>

        <!-- Last Name -->
        <div
            class="row"
            :class="{ 'errorWrap showError': hasError('address.billing.lastname') }"
        >
            <label for="billingLastname">
                Last Name<sup>*</sup>
            </label>
            <div class="inputWrap">
                <input
                    maxlength="20"
                    type="text"
                    name="cardholder_last_name"
                    id="billingLastname"
                    @focus="clearError('address.billing.lastname')"
                    :value="basket.address.billing.lastname"
                    @input="updateField('address.billing.lastname', $event.target.value)"
                    class="text"
                />
            </div>
            <div class="validationMessage" v-if="hasError('address.billing.lastname')">
                <span>{{ errors.address.billing.lastname }}</span>
            </div>
        </div>

        <!-- Email -->
        <div
            class="row"
            :class="{ 'errorWrap showError': hasError('info.email') }"
        >
            <label for="personalEmail">
                Email<sup>*</sup>
            </label>
            <div class="inputWrap">
                <input
                    maxlength="255"
                    type="email"
                    name="cardholder_email"
                    id="personalEmail"
                    @focus="clearError('info.email')"
                    :value="basket.info.email"
                    @input="updateField('info.email', $event.target.value)"
                    class="text"
                />
            </div>
            <div class="validationMessage" v-if="hasError('info.email')">
                <span>{{ errors.info.email }}</span>
            </div>
        </div>

        <!-- Optional Membership Password -->
        <template v-if="showPasswordField">
            <div
                class="row"
                :class="{ 'errorWrap showError': hasError('cardholder_password') }"
            >
                <label for="cardholder_password_field">
                    Password
                </label>
                <div class="inputWrap">
                    <input
                        v-show="!passwordVisible"
                        type="password"
                        autocomplete="off"
                        name="cardholder_password"
                        id="cardholder_password_field"
                        :value="cardholderPassword"
                        @input="$emit('update-password', $event.target.value)"
                        @focus="clearError('cardholder_password')"
                        class="text"
                    />
                    <input
                        v-show="passwordVisible"
                        type="text"
                        name="password_text"
                        id="password_text"
                        :value="cardholderPassword"
                        @input="$emit('update-password', $event.target.value)"
                        class="text"
                    />
                </div>
                <div class="validationMessage" v-if="hasError('cardholder_password')">
                    <span>{{ errors.cardholder_password }}</span>
                </div>
            </div>
            <div class="row checkboxRow">
                <input
                    type="checkbox"
                    name="reveal_password"
                    id="reveal_password"
                    v-model="passwordVisible"
                />
                <label for="reveal_password">
                    Click To Check Your Password
                </label>
            </div>
        </template>

        <!-- Date of Birth (for pharmacy/doctor items) -->
        <div
            class="row"
            v-if="basket.contains_doctor_pharmacy_items"
            :class="{ 'errorWrap showError': hasError('info.dob') }"
        >
            <label for="dobDate" class="tooltipRow">
                Date of Birth<sup>* </sup>
                <span class="infoTooltip" @click="toggleTooltip">
                    <font-awesome-icon :icon="['far', 'info-circle']" aria-hidden="true" />
                </span>
                <div class="tooltipContent" :class="{ 'show': showTooltip }">
                    Due to medication you are ordering, we need to perform an ID verification check.
                    Please see our <a href="/customer-care/privacy-policy/" target="_blank" rel="noopener noreferrer">Privacy Policy</a> for further information
                </div>
            </label>

            <div class="inputWrap dobWrap">
                <input
                    type="tel"
                    maxlength="2"
                    name="cardholder_dob_date"
                    id="dobDate"
                    ref="dobDay"
                    placeholder="DD"
                    :value="basket.info.dob_date"
                    @input="onDobInput('dob_date', $event)"
                    @focus="clearError('info.dob')"
                    class="text prefix"
                />
                <input
                    type="tel"
                    maxlength="2"
                    name="cardholder_dob_month"
                    id="dobMonth"
                    ref="dobMonth"
                    placeholder="MM"
                    :value="basket.info.dob_month"
                    @input="onDobInput('dob_month', $event)"
                    @focus="clearError('info.dob')"
                    class="text prefix"
                />
                <input
                    type="tel"
                    maxlength="4"
                    name="cardholder_dob_year"
                    id="dobYear"
                    ref="dobYear"
                    placeholder="YYYY"
                    :value="basket.info.dob_year"
                    @input="onDobInput('dob_year', $event)"
                    @focus="clearError('info.dob')"
                    class="text prefix"
                />
            </div>

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

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

export default {
    name: 'personal-details',

    mixins: [errorMixin],

    props: {
        basket: {
            type: Object,
            required: true
        },
        genders: {
            type: [Object, Array],
            default: () => ({})
        },
        errors: {
            type: [Object, Array],
            default: () => ({})
        },
        memberId: {
            type: Number,
            default: 0
        },
        membersSection: {
            type: Boolean,
            default: false
        },
        membersBasket: {
            type: Boolean,
            default: false
        },
        memberIsVerified: {
            type: Boolean,
            default: false
        },
        cardholderPassword: {
            type: String,
            default: ''
        }
    },

    data() {
        return {
            showTooltip: false,
            passwordVisible: false
        };
    },

    computed: {
        showPasswordField() {
            // Show password field when members section is enabled, user is not logged in, and members basket is enabled
            return this.membersSection && this.memberId < 1 && this.membersBasket;
        }
    },

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

        updateField(path, value) {
            this.$emit('update-field', { path, value });
        },

        onGenderChange(value) {
            this.updateField('address.billing.gender', value);
            this.clearError('address.billing.gender');
        },

        onDobInput(field, event) {
            const value = event.target.value;
            this.updateField(`info.${field}`, value);

            // Auto-advance to next field
            if (field === 'dob_date' && value.length === 2) {
                this.$refs.dobMonth?.focus();
            } else if (field === 'dob_month' && value.length === 2) {
                this.$refs.dobYear?.focus();
            }
        },

        toggleTooltip() {
            this.showTooltip = !this.showTooltip;
        }
    }
};
</script>

<style lang="less" scoped>
.tooltipContent {
    display: none;
    &.show {
        display: block;
    }
}
</style>
