import { pg } from "./Pages";
import { Control, type IControlOptions } from "./Control";
import forEach from 'lodash/forEach';
import Velocity from "velocity-animate";

const stringQuickview = 'Quickview';

export interface IQuickviewOptions extends IControlOptions {
    notes?: string,
    alerts?: string,
    chat?: string,
    notesList?: string,
    noteEditor?: string,
    deleteNoteButton?: string,
    deleteNoteConfirmButton?: string,
    newNoteButton?: string,
    backButton?: string,
}

const defaultProps: IQuickviewOptions = {
    notes: '#note-views',
    alerts: '#alerts',
    chat: '#chat',
    notesList: '.list',
    noteEditor: '.quick-note-editor',
    deleteNoteButton: '.delete-note-link',
    deleteNoteConfirmButton: '.btn-remove-notes',
    newNoteButton: '.new-note-link',
    backButton: '.close-note-link'
};

export class Quickview extends Control<IQuickviewOptions> {
    bezierEasing: number[];

    constructor(element: HTMLElement | string, options: IQuickviewOptions) {
        super(element, options, defaultProps);

        this.bezierEasing = [.05, .74, .27, .99];

        this.bind();
    }

    private bind = () => {
        const self = this;
        if ( !(stringQuickview in self.element ) ) { // prevent adding event handlers twice
            pg.live('.list > ul > li', 'click', function(_e) {
                const note = this.querySelector('.note-preview');
                pg.queryElement(self.options.noteEditor).innerHTML = note.innerHTML;
                pg.toggleClass(pg.queryElement(self.options.notes), 'push');
            }, pg.queryElement(this.options.notes));
        
            pg.live('.list > ul > li .checkbox', 'click', function(e) {
                e.stopPropagation();
            }, pg.queryElement(this.options.notes));
        
            pg.live(self.options.backButton, 'click', function(_e) {
                const link = pg.queryElement(self.options.notes).querySelector('.toolbar > li > a') as HTMLAnchorElement;
                pg.removeClass(link, 'active');
                pg.toggleClass(pg.queryElement(self.options.notes), 'push')
            }, pg.queryElement(this.options.notes));
           
        
            pg.live(this.options.deleteNoteButton, 'click', function(e) {
                e.preventDefault();
                pg.toggleClass(this,'selected');
                const checkboxes = pg.queryElement(self.options.notes).querySelectorAll('.list > ul > li .checkbox') as NodeListOf<HTMLInputElement>;
                if (!checkboxes.length) {
                    return;
                }
                
                var fadeClass = checkboxes[0].style.display === 'none' ? "fadeIn" : "fadeOut";
        
                forEach(checkboxes, function(checkbox) {
                    Velocity(checkbox, fadeClass, {
                        duration: 200,
                        complete:function(){                  
                        } 
                    });
                });
        
                var deleteConfirm = pg.queryElement(self.options.deleteNoteConfirmButton)
                    Velocity(deleteConfirm, fadeClass, {
                        duration: 200,
                        complete:function(){   
                            pg.removeClass(deleteConfirm, 'hide')               
                        } 
                    });
                
            });
        
            pg.live(this.options.newNoteButton, 'click', function(e) {
                e.preventDefault();
                pg.queryElement(self.options.noteEditor).innerHTML = ''
            });
        
            pg.live(this.options.deleteNoteConfirmButton, 'click', function(_e) {
                var checked = pg.queryElement(self.options.notes).querySelectorAll('input[type=checkbox]:checked') as NodeListOf<HTMLInputElement>;
                for (var i = 0; i < checked.length; i++) {
                    const el = pg.getClosest(checked[i], 'li');
                    if (el) {
                        el.remove();
                    }
                }
            });
        
            pg.live('.toolbar > li > a', 'click', function(_e) {
                //e.preventDefault();
                var command = this.getAttribute('data-action');
                document.execCommand(command, false, null);
                pg.toggleClass(this, 'active');
            }, pg.queryElement(this.options.notes));
        
            var toggleEvent = function(this: HTMLElement, e: Event) {
                var elem = this.getAttribute('data-toggle-element');
                pg.toggleClass(pg.queryElement(elem),'open');
                e.preventDefault();
            }
            var toggles = document.querySelectorAll('[data-toggle="quickview"]');
            forEach(toggles, function(toggle) {
                pg.on(toggle, 'click', toggleEvent)
                pg.on(toggle, 'touchstart', toggleEvent)
            });            

            self.element[stringQuickview] = self;
        }
    }
}

pg[stringQuickview] = Quickview;