import InputTextArea from "/Components/Common/InputTextArea.js?v=3.4"
export default {
    props: {
        parentContext: { type: Object, required: false },
        reasonRequired: { type: Boolean, required: false, default: false },
        reasonPlaceholderText: { type: String, required: false },
        yesButtonText: { type: String, required: false },
        noButtonText: { type: String, required: false },
        cbActionRequired: { type: Boolean, required: false, default: false },
        cbActionText: { type: String, required: false },
        modalTitle: { type: String, required: false },
        modalBody: { type: String, required: false },
        //isVisible: {type: Boolean, required: true}
    },
    components: {
        InputTextArea
    },
    emits: ['onYes', 'onNo'],
    data() {
        return {
            reason: '',            
            cbAction: false
        }
    },
    created: function () {
        //if (this.isVisible)
        setTimeout(function () { $('#myModal').modal('show') },50);
        //else
        //    $('#myModal').modal('hide');
    },
    updated: function () {
        //if (this.isVisible)
        //    $('#myModal').modal('show');
        //else
        //    $('#myModal').modal('hide');
    },
    methods: {
        onNoHandler: function (e) {
            this.$emit('onNo', { reason: this.reason, cbAction: this.cbAction, parentContext: this.parentContext, submit: false });
        },
        onYesHandler: function (e) {
            if (this.reasonRequired && this.reason == '') {
                $('#txtreason').parent().addClass('validation-failed');
                $('#txtreason').focus();
                return;
            }

            $('#myModal').modal('hide');
            this.$emit('onYes', { reason: this.reason, cbAction: this.cbAction, parentContext: this.parentContext, submit: true });
        },
        focus: function (e) {
            $(e.target).parent().removeClass('validation-failed');
        }
    },
    template: `
<div class="modal" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <h6 class="modal-title pull-left" v-if="modalTitle != ''">{{ modalTitle }}</h6>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="onNoHandler">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <div class="row" v-if="modalBody != ''">
                    <div class="col-12">
                        <div class="word-break">{{ modalBody }}</div>
                    </div><br/>
                </div>

                <div class="row" v-if="cbActionRequired">
                    <div class="col-12">
                        <div class="form-label-group">
                            <input type="checkbox" v-model="cbAction" id="cbAction" />
                            <label for="cbAction"> {{ cbActionText }}</label>
                        </div>
                    </div><br/>
                </div>

                <div class="row" v-if="reasonRequired">
                    <div class="col-12">
                        <div class="form-label-group">
                            <InputTextArea id="txtreason" v-model:fieldValue="reason" fieldRows="5" :placeholder="reasonPlaceholderText" />
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-primary waves-effect" @click="onYesHandler" v-if="yesButtonText != ''">{{ yesButtonText }}</button>
                <button type="button" class="btn btn-secondary waves-effect" @click="onNoHandler" data-dismiss="modal" v-if="noButtonText != ''">{{ noButtonText }}</button>
            </div>
        </div>
    </div>
</div>
`
}
