@php($translatePrefix = 'env-editor::env-editor.views.currentEnv.')
<template id="env-editor-modal">
    <div id="env-editor-keys-modal" class=" modal fade  " tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" :class="'text-' + actionClass">@{{ title }}</h5>
                    <button type="button" class="close" @click="hideModal()" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <input type="hidden" name="group" v-model.trim="modalItem.group">
                        <div class="form-group">
                            <label for="env_key"
                                class="col-form-label">{{ __($translatePrefix . 'modal.input.key') }}:</label>
                            <input type="text" class="form-control" id="env_key" :readonly="readonly.key"
                                v-model.trim="modalItem.key" />
                        </div>
                        <div class="form-group">
                            <label for="env_value"
                                class="col-form-label">{{ __($translatePrefix . 'modal.input.value') }}:</label>
                            <input type="text" class="form-control" id="env_value" :readonly="readonly.value"
                                v-model.trim="modalItem.value" />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
                        @click="hideModal()">{{ __($translatePrefix . 'modal.btn.close') }}</button>
                    <button id="save_evnVariable" type="button" class="btn " :class="'btn-' + actionClass"
                        @click="submit()"> @{{ submitBtn }}</button>
                </div>
            </div>
        </div>
    </div>
</template>

@push('scripts')
    <script>
        let itemsModal = {
            template: '#env-editor-modal',
            data: () => {
                return {
                    modal: '#env-editor-keys-modal',
                    type: '',
                    modalItem: {},
                    readonly: {
                        key: false,
                        value: false,
                    }
                }
            },
            mounted() {
                this.modalItem = this.newModalItem();

                envEventBus.$on('env:item:edit', (item) => {
                    this.makeReadOnly('key');
                    this.show('edit', item);
                }).$on('env:item:delete', (item) => {
                    this.makeReadOnly('key');
                    this.makeReadOnly('value');
                    this.show('delete', item);
                }).$on('env:item:new', (item) => {
                    this.show('new', item);
                });
            },
            computed: {
                submitBtn() {
                    let values = {
                        'new': '{{ __($translatePrefix . 'modal.btn.new') }}',
                        'edit': '{{ __($translatePrefix . 'modal.btn.edit') }}',
                        'delete': '{{ __($translatePrefix . 'modal.btn.delete') }}',
                    };

                    return values[this.type.toLowerCase()];
                },
                title() {
                    let values = {
                        'new': '{{ __($translatePrefix . 'modal.title.new') }}',
                        'edit': '{{ __($translatePrefix . 'modal.title.edit') }}',
                        'delete': '{{ __($translatePrefix . 'modal.title.delete') }}',
                    };

                    return values[this.type.toLowerCase()] + ': ' + this.modalItem.key;
                },
                actionClass() {
                    switch (this.type) {
                        case 'delete':
                            return 'danger';
                        case 'edit':
                            return 'info';
                        default:
                            return 'success';
                    }
                }
            },
            methods: {
                newModalItem: () => {
                    return {
                        key: '',
                        value: '',
                        group: null,
                    }
                },
                hideModal() {
                    this.modalItem = this.newModalItem();
                    this.readonly.key = false;
                    this.readonly.value = false;
                    $(this.modal).modal('hide');
                },
                getAjaxMethod() {
                    switch (this.type) {
                        case 'delete':
                            return 'DELETE';
                        case 'edit':
                            return 'PATCH';
                        default:
                            return 'POST'
                    }
                },
                makeReadOnly(arg = null) {
                    let $vm = this;
                    if (arg) {
                        $vm.readonly[arg] = true;
                        return;
                    }
                    Object.keys($vm.readonly).forEach(function(el) {
                        $vm.readonly[el] = true;
                    });
                },
                show(type = '', item) {
                    (item) ? this.modalItem = item: '';
                    this.type = type;
                    $(this.modal).modal('show')
                },
                submit() {
                    envClient('{{ route(config($package . '.route.name') . '.key') }}', {
                        method: this.getAjaxMethod(),
                        data: this.modalItem
                    }).then(data => {
                        if (data.message) {
                            envAlert('info', data.message);
                        }
                        envEventBus.$emit('env:changed')

                    }).then(() => {
                        this.hideModal();
                    });
                },
            }
        };
    </script>
@endpush