import * as React from "react";
import { DSCheckbox } from "@dewesoft-web/ui/controls";
import { GridColumnModel } from "../model/";
import { ChooseColumnsModel } from "./ChooseColumnsModel";
import { observer } from "mobx-react";

import * as theme from "./list.scss";

export interface ColumnListProps {
    model : ChooseColumnsModel;
}

const ARROW_UP = 38;
const ARROW_DOWN = 40;

@observer
export class ColumnList extends React.Component<ColumnListProps, any> {

    listBox : any;

    props : ColumnListProps;

    constructor(props : any) {
        super(props);

        this.listBox = null;

        this.keyDown = this.keyDown.bind(this);
    }

    componentDidMount() {
        if (this.listBox) {
            this.listBox.focus();
        }
    }

    componentWillUnmount() {
        this.listBox = null;
    }

    keyDown(keyboardEvent) {
        switch (keyboardEvent.keyCode) {
            case ARROW_UP:
                this.props.model.goToPreviousColumn();
                break;
            case ARROW_DOWN:
                this.props.model.goToNextColumn();
                break;
            default:
                break;
        }
    }

    render() {
        const {model} = this.props;

        const listBoxCss : React.CSSProperties = {
            border: "1px solid grey",
            height: "300px",
            paddingTop: "5px",
            paddingBottom: "2px",
            overflowX: "hidden",
            outline: "none"
        };

        return (
            <div ref={(el) => this.listBox = el} style={listBoxCss} onKeyDown={this.keyDown} tabIndex={1}>
                {model.filteredColumns.map((column : GridColumnModel, idx : number) => {
                    const isSelected = column === model.selectedColumn;

                    const className = [
                        theme.listItem,
                        isSelected ? theme.selected : ""
                    ].join(" ");

                    return (
                        <div key={column.property} className={className} onClick={ () => model.select(column)}>
                            <DSCheckbox checked={column.visible}
                                        name={"column-" + column.property}
                                        label={column.title}
                                        labelSelect={false}
                                        style={{ marginBottom: "0", paddingTop: "1px" }}
                                        onChange={(e) => {
                                            column.setVisible((e.target as any).checked);
                                        }}
                            />
                        </div>
                    );
                })}
            </div>
        );
    }
}