<template>
    <modal
        :ref="ModalName"
        :modalId="ModalName"
        :footerButtonText="ModalCloseButtonText"
        :isButtonDisabled="isButtonDisabled"
        @footerButtonEvent="footerButtonClick">
        <div class="form-test-invalid">
            <h5 class="text-center mb-4">
            {{ ModalHeadline }}
            </h5>
            <div>
                <div
                    class="mb-4"
                    v-html="ModalBodyText"></div>
                <tpaRecalToggle
                    class="mb-5"
                    cmsWidgetName="TPARecalModalToggle" />
                <buttonQuestion
                    ref="tpaRecalQuestion"
                    v-model="tpaRecalAnswer"
                    class="radioQuestion safelite-or-tpa-question windshield-chip-count-question mb-4"
                    :cmsWidgetName="buttonCmsWidgetName"
                    :questionText="tpaRecalQuestionText"
                    :answers="tpaRecalAnswersFromCms"
                    groupName="tpaRecalQuestion"
                    buttonID="tpaRecalQuestion"
                    buttonTypeString="listButtonHorizontal"
                    isRequired></buttonQuestion>
                <checkBox
                v-if="showAcknowledgementCheckbox"
                    ref="tpaAcknowledgement"
                    v-model="acknowledged"
                    class="mb-2"
                    :class="showAcknowledgementError && ' has-error'"
                    :validationRules="rules.optionRequired"
                    checkboxName="tpaAcknowledgement"
                    buttonID="tpaAcknowledgement"
                    :tabIndex="0"
                    :checkboxLabel="ModalSubBodyText"
                    :screenReaderOnlyText="ModalSubBodyText"
                    isRequired />
                <div
                    v-if="showAcknowledgementError || showNoSelectionError"
                    class="row form-test-error mt-1">
                    <p>{{ errorMessage }}</p>
                </div>
            </div>
        </div>
    </modal>
</template>

<script>
import modal from '@/digital-components/modal/modal.vue';
import tpaRecalToggle from '@/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue';
import checkBox from '@/ux-components/checkbox/checkbox.vue';
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
import globalRules from '@/constants/global-rules';
import PROVIDER_PREFERENCE_OPTIONS from '@/constants/provider-preference';

export default {
    name: 'content-group-modal',
    components: {
        modal,
        tpaRecalToggle,
        checkBox,
        buttonQuestion
    },
    props: {
        cmsWidgetName: String,
        buttonCmsWidgetName: String,
        ackError: String,
        noSelectionError: String
    },
    emits: ['buttonClick'],
    data() {
        return {
            acknowledged: false,
            showAcknowledgementError: false,
            showNoSelectionError: false,
            tpaRecalAnswer: '',
            rules: {
                optionRequired: globalRules.OPTION_REQUIRED
            }
        };
    },
    computed: {
        ModalName() {
            return this.cmsWidgetName;
        },
        ModalHeadline() {
            return this.getCmsContent(this.cmsWidgetName, 'HeaderText');
        },
        ModalBodyText() {
            return this.getCmsContent(this.cmsWidgetName, 'BodyText');
        },
        ModalSubBodyText() {
            return this.getCmsContent(this.cmsWidgetName, 'BodyText2');
        },
        ModalCloseButtonText() {
            return this.getCmsContent(this.cmsWidgetName, 'FooterText');
        },
        tpaRecalQuestionText() {
            return this.getCmsContent(this.buttonCmsWidgetName, 'QuestionText');
        },
        tpaRecalAnswersFromCms() {
            return this.getCmsContent(this.buttonCmsWidgetName, 'Answers');
        },
        showAcknowledgementCheckbox() {
            return this.tpaRecalAnswer === PROVIDER_PREFERENCE_OPTIONS.TPA;
        },
        isButtonDisabled() {
            return !this.acknowledged;
        },
        errorMessage() {
            if (this.showNoSelectionError) {
                return this.noSelectionError;
            } else if (this.showAcknowledgementError) {
                return this.ackError;
            }
            return '';
        }
    },
    watch: {
        acknowledged() {
            this.showAcknowledgementError = false;
        },
        tpaRecalAnswer() {
            this.showNoSelectionError = false;
            this.showAcknowledgementError = false;
        }
    },
    methods: {
        openModal() {
            this.$refs[this.ModalName].openModal();
        },

        footerButtonClick() {
            if (this.tpaRecalAnswer && (!this.showAcknowledgementCheckbox || this.acknowledged )) {
                this.$refs[this.ModalName]?.closeModal();
                this.$emit('buttonClick', this.tpaRecalAnswer);
            } else if (!this.tpaRecalAnswer) {
                this.showNoSelectionError = true;
                this.showAcknowledgementError = false;
            } else {
                this.showAcknowledgementError = true;
                this.showNoSelectionError = false;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.modal {
    &.modal-component {
        .modal-dialog {
            .modal-content {
                .modal-body {
                    .modal-sub-body {
                        color: $gray-600;
                    }
                    ul {
                        margin-bottom: 0;
                    }
                    p {
                        &:last-child {
                            margin-bottom: 0;
                        }
                        margin-bottom: .5rem;
                    }
                }
            }
        }
    }
    .safelite-or-tpa-question {
        :deep(.question-text) {
            span {
                font-weight: 500;
            }
        }
    }
}


.form-test-error {
    p {
        font-weight: 500;
    }
}
</style>
