<template>
    <modal
        :ref="modalName"
        :fontSize="true"
        :headerText="modalHeaderText"
        :footerButtonText="footerCloseButtonText"
        :onModalClosedCallback="onModalClosed"
        class="calendar-modal"
        @isModalOpened="setModalStatus"
        @footerButtonEvent="setSelectedCalendarOption">
        <template v-if="isModalOpened">
            <buttonQuestion
                ref="buttonQuestion"
                v-model="selectedCalendarOption"
                buttonTypeString="calendarModalListButton"
                :buttonTypeObject="calendarModalListButton"
                :answers="getCalendarOptionData"
                groupName="chooseCalendarType"
                class="mt-1"
                textPosition="text-center"
                isRequired
                validationRules="calendar-option-required" />
        </template>
    </modal>
</template>
<script>
import modal from '@/digital-components/modal/modal.vue';
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
import { defineRule, useField } from 'vee-validate';
import errorMessages from '@/constants/error-messages.js';
import { required } from '@/helpers/validation-rules';
import { deepClone } from '@/helpers/object-helper';
// eslint-disable-next-line import/no-extraneous-dependencies
import { v4 as uuidv4 } from 'uuid';
import calendarModalListButton from './calendar-modal-list-button/calendar-modal-list-button.vue';
// Validation for the modal button
defineRule('calendar-option-required', required(errorMessages.OPTION_REQUIRED));
export default {
    name: 'calendar-modal-question',
    components: {
        modal,
        buttonQuestion
    },
    props: {
        calendarOptionsData: Object,
        modelValue: {
            type: Object,
            default: () => ({
                url: null,
                name: null,
                icon: null
            })
        }
    },
    emits: ['calendar-modal-closed', 'update:modelValue'],
    setup(props) {
        const uuid = uuidv4();
        const componentId = !props.customComponentId
            ? `component-${uuid}`
            : props.customComponentId;

        const { modelValue } = deepClone(props);
        const initialValue = modelValue;

        const fieldOptions = {
            value: modelValue,
            initialValue
        };

        const { errorMessage, handleChange, meta, validate, errors } = useField(
            componentId,
            props.validationRules,
            fieldOptions
        );

        return {
            componentId,
            errorMessage,
            handleChange,
            validate,
            meta,
            errors
        };
    },
    data() {
        return {
            isModalOpened: false,
            selectedValue: null,
            calendarModalListButton
        };
    },
    computed: {
        modalName() {
            return 'calendarOptions';
        },
        modalHeaderText() {
            return 'Add to Calendar';
        },
        footerCloseButtonText() {
            return 'Add to Calendar';
        },
        modal() {
            return this.$refs[this.modalName];
        },
        selectedCalendarOption: {
            get() {
                return this.modelValue?.name;
            },
            set(newValue) {
                // Button Question only supports Number, or String data types so we must convert to the full object before emitting
                this.selectedValue = this.getSelectedCalendarObject(newValue);
            }
        },
        getCalendarOptionData() {
            return this.calendarOptionsData.map((item) => ({
                value: item.name,
                buttonLabel: item.icon
            }));
        },
        watch: {
            modelValue: {
                handler(newValue) {
                    this.handleChange(newValue);
                },
                deep: true
            }
        }
    },
    methods: {
        openModal() {
            this.modal.openModal();
        },
        setModalStatus(isOpened) {
            this.isModalOpened = isOpened;
        },
        closeModal() {
            this.modal.closeModal();
        },
        onModalClosed() {
            this.$emit('calendar-modal-closed');
        },
        async setSelectedCalendarOption() {
            this.$emit('update:modelValue', this.selectedValue);
            this.closeModal();
        },

        getSelectedCalendarObject(calendarOptionId) {
            // eslint-disable-next-line no-shadow
            const calendarOption = this.calendarOptionsData?.find((calendarOption) => calendarOption.name === calendarOptionId);

            if (calendarOption) {
                return {
                    url: calendarOption.url,
                    name: calendarOption.name,
                    icon: calendarOption.icon
                };
            }

            return {
                url: null,
                name: null,
                icon: null
            };
        }
    }
};
</script>
<style lang="scss" scoped>
.calendar-modal.modal.modal-component {
    > .modal-dialog > .modal-content {
        margin-top: 1.5rem;
    }
    .modal-header {
        padding-bottom: 0;
        margin-bottom: 0 !important;
    }

    overflow: hidden;
}
</style>
