<template>
    <div class="content-wrapper">
        <app-breadcrumb :page-title="$t('template')" :icon="'briefcase'" />
        <div class="row">
            <div class="col-12 col-md-5 col-lg-4 mb-3">
                <AiForm :template="template" :document-store-count="documentStoreCount"
                    @documentContent="setDocumentContent" />
            </div>
            <div class="col-12 col-md-7 col-lg-8">
                <DocumentForm :document-content="sanitize(documentContent)" :url="storeUrl" :text-editor-height="documentTextEditorHeight" @document-store="documentStore" />
            </div>
        </div>
    </div>
</template>

<script>
import AiForm from './AiForm.vue';
import DocumentForm from '../Document/DocumentForm.vue';
import { DOCUMENT_STORE } from '../../../config/ApiUrl';
import sanitize from "../../../helpers/SanitizeHelper";

export default {
    name: "GeneratorForm",
    components: { AiForm, DocumentForm },
    props: {
        template: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            documentContent: "",
            storeUrl: DOCUMENT_STORE,
            documentStoreCount: 0
        }
    },
    methods: {
        sanitize,
        setDocumentContent(content) {
            this.documentContent = content;
        },
        documentStore() {
            this.documentStoreCount++;
        }
    },
    computed: {
        documentTextEditorHeight() {
            let height = 425;
            let fields = JSON.parse(this.template.fields);
            for (const field of fields) {
                height += field.type == 'text' ? 65 : 75;
            }
            return height;
        }
    }
}
</script>

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