<template>
    <div class="tpa-recal-modal-container">
        <modal
            :ref="ModalName"
            :modalId="ModalName"
            :footerButtonText="ModalCloseButtonText"
            :isButtonDisabled="isButtonDisabled"
            @footerButtonEvent="footerButtonClick"
            :displayCloseButton="false"
            :displayCloseLink="true">
            <div class="form-test-invalid">
                <h5>
                {{ ModalHeadline }}
                </h5>
                <div>
                    <div
                        class="mb-4"
                        v-html="ModalBodyText"></div>
                    <tpaRecalToggle
                        class="mb-5"
                        cmsWidgetName="TPARecalModalToggle" />
                    <buttonQuestion
                        ref="tpaRecalQuestion"
                        v-model="tpaRecalAnswer"
                        class="tpa-recal-question"
                        :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 mt-4"
                        :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>
    </div>
</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>
:deep(.modal) {
    h5 {
        font-size: 1.625rem;
        margin-bottom: .625rem;
    }
    .modal-body {
        color: #4d4e53;
    }
    .modal-footer {
        padding-top: 22px;
        button {
            background-color: $green;
            color: $white;
            font-weight: $font-weight-bold;
            &:hover {
                background-color: $green;
            }
        }
    }
    .tpa-recal-question > div:first-of-type { 
        margin-bottom: 20px;
    }
    .button-question {
        fieldset {
            box-shadow: 0px 2px 5px -5px rgba(0, 0, 0, 0.25);
        }
    }
    .list-button-horizontal {
        &.selected {
            input {
                background-color: $background-color-selected;
            }
        }
    }
    .form-check {
        p {
            font-size: 1rem;
        }
        .form-check-input:checked {
            + label p {
                font-size: 1rem;
                color: #4d4e53;
                font-weight: 500;
            }
        }
    }
}
</style>
