import { TValueObject } from '../types/TValueObject';
import { IValueObject } from '../interfaces/components/IValueObject';
let jodit = require("jodit/build/jodit.js");
import { TSettings } from '../types/TSettings';

declare let settings: TSettings;

export class Html implements IValueObject {

    protected html: string = `
        <div class="object-field">
            <label class="form-label js-label"></label>
            <textarea class="form-control html-text-area js-input"></textarea>
            <div class="invalid-feedback js-error-message"></div>
        </div>
    `;

    protected _template: HTMLElement;

    protected label: HTMLElement;

    protected input: HTMLInputElement;

    protected contentEditor: any;

    protected errorMessage: HTMLElement;

    protected data: TValueObject;

    protected formKey: string;

    public setFormKey(key: string) {
        this.formKey = key;
    }

    public constructor() {
        let div = document.createElement('div');
        div.innerHTML = this.html.trim();
        this._template = <HTMLElement>div.firstChild;
        this.label = this._template.querySelector('.js-label');
        this.input = this._template.querySelector('.js-input');
        // this.contentEditor = this.initJodit(this.$input);
        this.errorMessage = this._template.querySelector('.js-error-message');
    }

    public get template(): HTMLElement {
        return this._template;
    }

    public loadData(data: TValueObject) {
        this.data = data;
        this.label.innerText = data.description;
        // this.$input.val(data.value);
        // this.contentEditor.value = data.value;
    }

    public showErrors() {
        if (this.data.errors.length) {
            this.input.classList.add('is-invalid');
            this.errorMessage.innerText = this.data.errors[0];
        }
    }

    public clearErrors() {
        this.input.classList.remove('is-invalid');
        this.errorMessage.innerText = '';
    }

    public serialize(): TValueObject {
        return this.data;
    }

    public eventsListen() {
        // this.$input.on('input', (e:Event)=>{
        //     let val = $(e.target).val();
        //     this.data.value = val;
        // });
        if (this.contentEditor) {
            this.contentEditor.destruct();
        }
        this.contentEditor = this.initJodit(this.input);
        this.contentEditor.value = this.data.value;
        this.contentEditor.events.on('change', (html: string) => {
            this.data.value = html;
        });
    }

    protected initJodit(textArea: HTMLInputElement) {
        let joditConfig = {
            addNewLine: false,
            height: 300,
            allowResizeX: true,
            allowResizeY: true,
            iframe: true,
            iframeCSSLinks: [
                '/css/_style.min.css',
            ],
            uploader: {
                url: settings.filesBrowser.upload,
                prepareData: function (data: any) {
                    let token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                    data.append('_token', token);
                    return data;
                },
            },
            filebrowser: {
                ajax: {
                    url: settings.filesBrowser.ajax,
                    successStatuses: [200, 201, 202],
                    prepareData: function (data: any) {
                        data._token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');;
                        return data;
                    },
                },
                create: {
                    url: settings.filesBrowser.create,
                    successStatuses: [200, 201, 202],
                },
                move: {
                    url: settings.filesBrowser.move,
                    successStatuses: [200, 201, 202],
                },
                remove: {
                    url: settings.filesBrowser.remove,
                    successStatuses: [200, 201, 202],
                },
                items: {
                    url: settings.filesBrowser.items,
                    successStatuses: [200, 201, 202],
                },
                folder: {
                    url: settings.filesBrowser.folder,
                    successStatuses: [200, 201, 202],
                }
            }
        }

        return jodit.Jodit.make(textArea, joditConfig);
    }

}