export default class TryItForm {
    private $form: JQuery;
    private $toggle: JQuery;
    private $picker: JQuery;

    constructor($form: JQuery, $toggle: JQuery) {
        this.$form = $form;
        this.$picker = $form.find('.languages');
        this.$picker.find('.language').click(e => this.pick(e));
        this.$form.find('[name="language"]').on('input', e => this.update(e));
        this.$toggle = $toggle;
    }

    public toggle() {
        if (this.$form.hasClass('visible')) {
            this.hide();
        } else {
            this.show();
        }
    }

    public show() {
        this.$form.slideDown({
            complete: () => this.$form.addClass('visible')
        });
        this.$toggle
            .addClass('visible')
            .addClass('active');

        return this;
    }

    public hide() {
        this.$form.slideUp({
            complete: () => this.$form.removeClass('visible')
        });

        this.$toggle
            .removeClass('visible')
            .removeClass('active');

        return this;
    }

    get source() {
        return this.$form.find('[name="source"]').val();
    }

    set source(value: string) {
        this.$form.find('[name="source"]').val(value);
    }

    get language() {
        return this.$form.find('[name="language"]').val();
    }

    set language(value: string) {
        this.$form.find('[name="language"]').val(value);
    }

    public set(source: string, language: string) {
        this.source = source;
        this.language = language;
    }

    public submit() {
        this.$form.find('form').submit();
    }

    private update(e: JQueryKeyEventObject) {
        let $this  = $(e.currentTarget);
        let tokens = $this.val()
            .split(/\b/)
            .map(x => x.trim())
            .filter(x => !!x);

        let last: string|boolean = false;

        if (tokens.length) {
            last = tokens[tokens.length - 1];
            if (last == '>') {
                last = false;
            }
        }

        let standalone = tokens.indexOf('>') == -1;
        this.$picker
            .toggleClass('embeddable', !standalone)
            .toggleClass('standalone', standalone);

        this.$picker.find('.language').each((index, elem) => {
            let $elem = $(elem);
            let show  = !last || (typeof last == 'string' && $elem.text().indexOf(last) !== -1);

            $elem.toggleClass('hidden', !show);
        })
    }

    private pick(e: JQueryEventObject) {
        let $this = $(e.currentTarget);
        let $selector = this.$form.find('[name="language"]');
        let input = <HTMLInputElement>$selector[0];
        let value = input.value;

        let start = input.selectionStart;
        let end   = input.selectionEnd;

        while(start > 0 && value[start-1] != ' ' && start--) {}
        while(end < value.length && value[end] != ' ' && end++) {}

        input.value = value.substring(0, start) + $this.text().trim() + value.substring(end);

        return false;
    }
}