import {IFileInput} from '../../interfaces/components/file-input/IFileInput';
import {TValueObject} from '../../types/TValueObject';
import {IFileInputBus} from '../../interfaces/bus/IFileInputBus';

export class FileInput implements IFileInput {

    protected html:string = `
        <div class="object-field">
            <label class="form-label js-label"></label>
            <div class="input-group">
                <input type="text" class="form-control js-input">
                <div class="input-group-append">
                    <a href="#" class="input-group-text btn-info js-browser-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-arrow-down" viewBox="0 0 16 16">
                            <path d="M8.5 6.5a.5.5 0 0 0-1 0v3.793L6.354 9.146a.5.5 0 1 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 10.293V6.5z"/>
                            <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="invalid-feedback js-error-message"></div>
        </div>
    `;

    protected _template:HTMLElement;

    protected label:HTMLElement;

    protected input:HTMLInputElement;

    protected browserBtn:HTMLElement;

    protected errorMessage:HTMLElement;

    protected data:TValueObject;

    protected bus:IFileInputBus;

    protected formKey:string;

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

    public setBus(bus:IFileInputBus)
    {
        this.bus = bus;
    }

    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.browserBtn = this._template.querySelector('.js-browser-btn');
        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.value = data.value;
    }

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

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

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

    public eventsListen()
    {
        this.input.oninput = (e:Event)=>{
            let val = this.input.value;
            this.data.value = val;
        };
        this.browserBtn.onclick = (e:Event)=>{
            e.preventDefault();
            this.bus.execBrowserModal()
                .then((fileName:string)=>{
                    this.data.value = fileName;
                    this.input.value = fileName;
                });
        };
    }

}