import Ajax from "../ajax.js";
import { alertConfirmAction, alertConfirmationDelete, alertError, alertSuccess } from "../alerts/sweetAlert.js";
import Modal from "../modal.js"
import { getTablerIconClassName } from "../../common/common.js";
class WikiSectionForm {
    constructor() {
        this.item = $("#formSection")
        this.btnNew = $("#submit-new-section")
        this.btnUpdate = $("#submit-update-section")
        this.btnDelete = $("#delete-section")
        this.name = this.item.find('#section-name')
        this.icon = this.item.find('#section-icon')
        this.roles = this.item.find('#section-roles').select2({
            dropdownParent: this.item.parent()
        })

        this.newSectionBtn = $("#new-section")
        this.editSectionBtn = $("#edit-section")
        this.modalSection = $("#modalSection")
        this.modal = new Modal(this.modalSection)
        this.icons = getTablerIconClassName().map((e, index) => {
            return { 'text': e, 'id': `ti ${e}` }
        })
    }
    renderIcon(option) {
        var icon = `<i  class="ti ${option.text}"></i> ${option.text}`;
        return icon;
    }
    init() {
        this.icon.wrap('<div class="position-relative"></div>').select2({
            data: this.icons,
            dropdownParent: this.icon.parent(),
            templateResult: this.renderIcon,
            templateSelection: this.renderIcon,
            escapeMarkup: function (m) { return m; }
        })
        this.icon.on('change', () => {
            console.log(this.icon.val())
        })
        this.btnNew.on('click', this.post.bind(this))
        this.btnUpdate.on('click', this.update.bind(this))
        this.btnDelete.on('click',this.deleteConfirm.bind(this))

        this.newSectionBtn.on('click', () => {
            this.initPost()
        })
        this.editSectionBtn.on('click', () => {
            this.initUpdate()
        })
    }
    setId(id) {
        this.sectionId = id
    }
    initPost() {
        this.showPost()

    }
    initUpdate() {
        this.showUpdate()

    }
    getFormData() {
        return {
            name: this.name.val(),
            icon: this.icon.val(),
            roles: this.roles.val()
        }
    }
    post() {

        const ajax = new Ajax('/wiki/section',
            this.getFormData(),
            null,
            this.success.bind(this),
            this.error.bind(this)
        )
        ajax.post()
    }

    update() {
        const ajax = new Ajax('/wiki/update/section',
            {
                wiki_section_id: this.sectionId,
                ...this.getFormData()
            },
            null,
            this.success.bind(this),
            this.error.bind(this)
        )
        ajax.post()
    }
    deleteConfirm() {
        alertConfirmAction('Eliminar sección').then(result => {
            if (result.isConfirmed) {
                this.delete()
            }
            console.log(result)
        });
    }
    delete() {
        const ajax = new Ajax('/wiki/section/' + this.sectionId,
            null,
            null,
            this.success.bind(this),
            this.error.bind(this)
        )
        ajax.delete()
    }
    success(response) {
        alertSuccess(response.message).fire()
        this.modal.toggle()
    }
    error(error) {
        alertError(error?.message).fire()
    }
    showPost() {
        this.empty()
        this.btnNew.removeClass('d-none')
        this.btnUpdate.addClass('d-none')
        $("#modalTitleNew").removeClass('d-none')
        $("#modalTitleEdit").addClass('d-none')
        this.modal.toggle()


    }
    async showUpdate() {
        this.empty()
        const sectionData = await this.handleShowSection()
        if (sectionData) {
            console.log(sectionData)
            this.name.val(sectionData.data.name)
            this.icon.val(sectionData.data.icon).trigger('change')
            this.roles.val(sectionData.data.roles_array).trigger('change')
        }
        this.btnUpdate.removeClass('d-none')
        this.btnNew.addClass('d-none')
        $("#modalTitleNew").addClass('d-none')
        $("#modalTitleEdit").removeClass('d-none')
        this.modal.toggle()


    }
    handleShowSection() {
        return new Promise((resolve, reject) => {

            const ajax = new Ajax('/wiki/section/' + this.sectionId,
                null,
                null,
                (response) => {
                    resolve(response)
                },
                (error) => {
                    alertError(error.message).fire()
                    resolve(false)
                }
            )
            ajax.get()
        })
    }
    empty() {
        this.name.val(null)
        this.icon.val("").trigger('change')
        this.roles.val("").trigger('change')

    }
}

export default WikiSectionForm