
<template>
    <div class="card">
        <div class="card-body p-3">
            <!-- header part -->
            <form class="" ref="form">
                <div class="row mb-3">
                    <div class="col-8">
                        <div class="row">
                            <div class="col-6">
                                <app-input type="text" :placeholder="$t('enter_document_name')" v-model="formData.name" />
                            </div>
                            <div class="col-6">
                                <app-input type="select" :list="categories" v-model="formData.category_id" />
                            </div>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="d-flex justify-content-end" style="gap: 10px;">
                            <button v-if="isStore" type="button"
                                class="btn btn-info btn-sm transparent box-shadow-none text-primary" @click="submit">
                                <app-icon name="save"></app-icon>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <app-input :key="summernoteKey" v-if="summernoteEnable"
                                   type="text-editor" :minimal="true"
                                   :options="textEditorOptions" v-model="formData.content" />
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
import { FormMixin } from '../../../../core/mixins/form/FormMixin';

export default {
    name: "DocumentForm",
    mixins: [FormMixin],
    props: {
        categoryId: {
            type: Number,
            default: 0
        },
        documentId: {
            type: Number,
            default: 0
        },
        documentName: {
            type: String,
            default: ""
        },
        documentContent: {
            type: String,
        },
        url: {
            type: String,
            required: true,
        },
        textEditorHeight: {
            type: Number,
            default: 425,
        },
        isStore: {
            type: Boolean,
            default: true,
        },
        submitForm: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            summernoteKey: 0,
            summernoteEnable: false,
            formData: {
                document_id: this.documentId,
                category_id: this.categoryId,
                name: this.documentName,
                content: this.documentContent
            }
        }
    },
    created() {
        setTimeout(() => this.summernoteEnable = true);
        this.$store.dispatch('getTypeWiseCategory', { type: 'document' });
    },
    watch: {
        categories: {
            handler(newValue, oldValue) {
                if (!this.formData.category_id) this.formData.category_id = newValue.length > 0 ? newValue[0].id : ''
            },
            deep: true
        },
        submitForm: {
            handler(newValue) {
                if (newValue) {
                    this.submit();
                }
            },
            deep: true
        },
        documentId: {
            handler(newValue, oldValue) {
                if (newValue != oldValue) this.formData.document_id = newValue;
            },
            deep: true
        },
        categoryId: {
            handler(newValue, oldValue) {
                if (newValue != oldValue) this.formData.category_id = newValue;
            },
            deep: true
        },
        documentName: {
            handler(newValue, oldValue) {
                if (newValue != oldValue) this.formData.name = newValue;
            },
            deep: true
        },
        documentContent: {
            handler(newValue, oldValue) {
                if (newValue != oldValue) {
                    this.formData.content = newValue;
                    this.summernoteKey++;
                }
            },
            deep: true
        }
    },
    methods: {
        submit() {
            this.submitFromFixin(`post`, this.url, this.formData);
        },
        afterSuccess({ data }) {
            if (this.isStore) {
                this.$toastr.s('', data.message);
                this.formData.name = '';
                this.formData.content = '';
                this.$emit('document-store')
            } else {
                this.$emit('document-updated', data.message)
            }
        },
        afterError({ data }) {
            this.$toastr.e('', data.message);
        },
    },
    computed: {
        categories() {
            return this.$store.getters.categories.map(category => {
                return {
                    id: category.id,
                    value: category.name
                }
            });
        },
        textEditorOptions() {
            return {
                config: {
                    placeholder: this.$placeholder('content'),
                    dialogsInBody: true,
                    height: this.textEditorHeight,
                    toolbar: [
                            ['style', ['bold', 'italic', 'underline']],
                            ['fontsize', ['fontsize', 'height', 'color']],
                            ['para', ['ul', 'ol']],
                            ['insert', ['picture', 'link']]
                        ],
                }
            }
        }
    }
}
</script>

<style scoped>
.icon {
    width: 32px;
    height: 32px;
}
</style>