<template>
    <modal
        :ref="modalName"
        :fontSize="true"
        :headerText="modalHeaderText"
        :footerButtonText="footerCloseButtonText"
        :onModalClosedCallback="onModalClosed"
        @isModalOpened="setModalStatus"
        @footer-button-event="setSelectedCalendarOption"
        class="calendar-modal">
        <template v-if="isModalOpened">
            <buttonQuestion
                ref="buttonQuestion"
                buttonTypeString="calendarModalListButton"
                :buttonTypeObject="calendarModalListButton"
                :answers="getCalendarOptionData"
                groupName="chooseCalendarType"
                class="mt-1"
                textPosition="text-center"
                v-model="selectedCalendarOption"
                isRequired
                validationRules="calendar-option-required" />
        </template>
    </modal>
</template>
<script>
import modal from "@/digital-components/modal/modal";
import buttonQuestion from "@/digital-components/button-question/button-question";
import calendarModalListButton from "./calendar-modal-list-button/calendar-modal-list-button";
import { defineRule, useField } from "vee-validate";
import { errorMessages } from "@/constants/error-messages";
import { required } from "@/helpers/validation-rules";
import { deepClone } from "@/helpers/object-helper";
import { v4 as uuidv4 } from "uuid";
// 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,
            }),
        },
    },
    data() {
        return {
            isModalOpened: false,
            selectedValue: null,
            calendarModalListButton: calendarModalListButton,
        };
    },
    setup(props) {
        const uuid = uuidv4();
        const componentId = !props.customComponentId
            ? `component-${uuid}`
            : props.customComponentId;

        const modelValue = deepClone(props).modelValue;
        const initialValue = modelValue;

        const fieldOptions = {
            value: modelValue,
            initialValue: initialValue,
        };

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

        return {
            componentId,
            errorMessage,
            handleChange,
            validate,
            meta,
            errors,
        };
    },
    watch: {
        modelValue: {
            handler(newValue) {
                this.handleChange(newValue);
            },
            deep: true,
        },
    },
    computed: {
        modalName() {
            return "calendarOptions";
        },
        modalHeaderText() {
            return "Add to Calendar";
        },
        footerCloseButtonText() {
            return "Add to Calendar";
        },
        modal() {
            return this.$refs[this.modalName];
        },
        selectedCalendarOption: {
            get: function () {
                return this.modelValue?.name;
            },
            set: function (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) => {
                return {
                    value: item.name,
                    buttonLabel: item.icon,
                };
            });
        },
    },
    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) {
            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: 24px;
    }
    .modal-header {
        padding-bottom: 0;
        margin-bottom: 0 !important;
    }
}
</style>
