import * as React from "react";
import { observer } from "mobx-react";

import * as theme from "./GridHeader.scss";
import { ColumnModel } from "../models/ColumnModel";
import { action } from "mobx";

export interface HeaderProps {
    column : ColumnModel;

    onClick(e);
}

export const GridHeader = observer(function GridHeader(props : HeaderProps) {
    let startX, startWidth, element : HTMLElement;

    const { column, onClick } = props;

    const css = [
        theme.header,
        column.selected ? theme.selected : ""
    ].join(" ")
     .trim();

    function openContextMenu(event) {
        event.preventDefault();

        let clickX = event.clientX;
        let clickY = event.clientY;
        const scrollY = window.pageYOffset || document.documentElement.scrollTop;

        const currentMenu = (column.grid as any).name + "-menu";
        let menus = document.querySelectorAll(".context-menu") as HTMLCollectionOf<HTMLElement>;

        for (let i = 0; i < menus.length; i++) {
            let menuStyle = {
                top: "0px",
                left: "0px",
                visibility: "hidden"
            };

            if (menus[i].id === currentMenu) {
                if (clickX + menus[i].clientWidth >= window.innerWidth) {
                    clickX -= menus[i].clientWidth;
                }

                if (clickY + menus[i].clientHeight >= window.innerHeight) {
                    clickY -= menus[i].clientHeight;
                }
                menuStyle = {
                    top: (scrollY + clickY) + "px",
                    left: clickX + "px",
                    visibility: "visible"
                };
                menus[i].dataset.column = column.property;
            }
            Object.assign(menus[i].style, menuStyle);
        }

        return false;
    }

    function click(e) {
        const cssClassName = e.target.className;
        if (cssClassName !== css && cssClassName !== "header-title") {
            return;
        }

        if (onClick) {
            onClick(column);
        }
    }

    function initDrag(e) {
        startX = e.clientX;
        startWidth = parseInt(column.width.replace("px", ""));

        if (document) {
            document.documentElement.addEventListener('mousemove', doDrag, false);
            document.documentElement.addEventListener('mouseup', stopDrag, false);
        }
    }

    let doDrag = action((e : any) => {
        column.width = startWidth + (e.clientX - startX) + 'px';

        if (window.document) {
            const cells = document.querySelectorAll(`${column.grid.selector} [data-col-order='${column.order}']`);
            const count = cells.length;

            for (let i = 0; i < count; i++) {
                (cells.item(i) as HTMLElement).style.width = column.width;
                // console.log((cells.item(i) as HTMLElement).style.width, column.width)
            }
        }
    });

    function stopDrag(e) {
        document.documentElement.removeEventListener('mousemove', doDrag, false);
        document.documentElement.removeEventListener('mouseup', stopDrag, false);
    }

    const style : React.CSSProperties = {
        width: column.width ? column.width : "auto"
    };

    return (
        <div className={css} style={style} title={column.description} onContextMenu={openContextMenu} onClick={click}>
            <span className="header-title">{column.title}</span>
            <span className="resizer" onMouseDown={initDrag}/>
        </div>
    );
});