import {IAppContainer} from '../interfaces/components/IAppContainer';
import {IAppCommands} from '../interfaces/commands/IAppCommands';
import {TErrors} from '@common/object-input/types/TErrors';
import {IObjectForm} from '@common/object-input/interfaces/components/IObjectForm';
import {IObjectBus} from '@common/object-input/interfaces/bus/IObjectBus';
import {IComposite} from '@common/object-input/interfaces/components/IComposite';
import {TComposite} from '@common/object-input/types';
import {TSettings} from '../types/TSettings';

declare let settings:TSettings;

export class AppContainer implements IAppContainer {

    protected container:HTMLElement;

    protected keyInput:HTMLInputElement;

    protected keyError:HTMLElement;

    protected objectForm:IObjectForm;

    protected submitButton:HTMLElement;

    protected appCommands:IAppCommands;

    protected objectBus:IObjectBus;

    protected compositeCreator:()=>IComposite;

    public setCompositeCreator(callback:()=>IComposite)
    {
        this.compositeCreator = callback;
    }

    public setAppCommands(commands:IAppCommands)
    {
        this.appCommands = commands;
    }

    public setObjectBus(bus:IObjectBus)
    {
        this.objectBus = bus;
    }

    public setObjectForm(form:IObjectForm)
    {
        this.objectForm = form;
    }

    public init(container:HTMLElement)
    {
        this.container = container;
        this.keyInput = this.container.querySelector('.js-key-input');
        this.keyError = this.container.querySelector('.js-key-error-message');
        let objectForm = this.container.querySelector('.js-object-form-container');
        this.objectForm.init(<HTMLElement>objectForm);
        this.submitButton = this.container.querySelector('.js-submit-button');
        
        this.keyInput.value = settings.item.key;
        this.eventsListen();
    }

    protected eventsListen()
    {
        this.submitButton.onclick = (e:Event)=>{
            e.preventDefault();
            let key = <string>this.keyInput.value;
            let data = this.objectForm.getJSON();
            this.appCommands.editObject(key, data)
                .then((resp:any)=>{
                    if(resp.success){
                        window.location.href = settings.successUrl;
                    }
                })
                .catch((resp:any)=>{
                    this.showErrors(resp.errors);
                    this.objectForm.setData(resp.item.object);
                    this.objectForm.rerender();
                });
        }
    };

    protected showErrors(errors:TErrors)
    {
        if(errors['key']){
            this.keyError.innerText = errors['key'][0];
            this.keyError.classList.add('is-invalid');
        }
    }

    public renderObjForm(data:TComposite)
    {
        this.objectForm.render(data);
    }

}