import * as React from "react";
import { DSVerticalStack, DSHorizontalStack } from "@dewesoft-web/ui/layout";
import { DSEditBox, DSButton } from "@dewesoft-web/ui/controls";

import { ChooseColumnsModel } from "./ChooseColumnsModel";
import { observer } from "mobx-react";

import { ColumnList } from "./ColumnList";
import { ColumnOptions } from "./ColumnOptions";
import { action } from "mobx/lib/mobx";

export interface ChooseColumnsProps {
    model : ChooseColumnsModel;
}

const ARROW_UP = 38;
const ARROW_DOWN = 40;

@observer
export class ChooseColumns extends React.Component<ChooseColumnsProps, any> {

    props : ChooseColumnsProps;

    listBox;

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

        this.listBox = null;

        this.keyDown = this.keyDown.bind(this);
        this.onSearchChanged = this.onSearchChanged.bind(this);
        this.onSearchIconClicked = this.onSearchIconClicked.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;
        }
    }

    @action
    onSearchChanged(e) {
        this.props.model.searchString = e.target.value;
    }

    @action
    onSearchIconClicked() {
        if (this.props.model.searchString.length > 0) {
            this.props.model.searchString = "";
        }
    }

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

        return (
            <DSVerticalStack>
                <DSHorizontalStack align="stretch">
                    <DSEditBox span="100%"
                               width="100%"
                               name="columnSearch"
                               placeholder="Search"
                               labelPosition="top"
                               value={model.searchString}
                               label="Select columns you wish to display"
                               iconRight={model.searchIcon}
                               onKeyUp={this.onSearchChanged}
                               onChange={this.onSearchChanged}
                               onIconClicked={this.onSearchIconClicked}
                    />
                </DSHorizontalStack>
                <DSVerticalStack>
                    <DSHorizontalStack>
                        <DSVerticalStack width="100%" marginTop="5px">
                            <ColumnList model={model}/>
                        </DSVerticalStack>
                        <DSVerticalStack minWidth="75px" minHeight="300px" marginTop="5px" marginLeft="5px" id="stack-buttons">
                            <DSButton name="moveUp"
                                      onClick={model.moveSelectedUp}
                                      disabled={!model.canMoveUp}
                                      label="Mouve up"
                            />
                            <DSButton name="moveDown"
                                      marginTop="5px"
                                      onClick={model.moveSelectedDown}
                                      disabled={!model.canMoveDown}
                                      label="Move down"
                            />
                            <DSButton name="show"
                                      marginTop="5px"
                                      onClick={model.showSelected}
                                      disabled={model.selectedColumn.visible}
                                      label="Show"
                            />
                            <DSButton name="hide"
                                      marginTop="5px"
                                      marginBottom="5px"
                                      onClick={model.hideSelected}
                                      disabled={!model.selectedColumn.visible}
                                      label="Hide"
                            />
                            <DSVerticalStack marginTop="10px">
                                <DSButton name="selectAll"
                                          onClick={model.selectAll}
                                          label="Select all"
                                />
                                <DSButton name="deselectAll"
                                          marginTop="5px"
                                          marginBottom="5px"
                                          onClick={model.deselectAll}
                                          label="Deselect all"
                                />
                            </DSVerticalStack>
                            <DSButton name="default"
                                      marginTop="auto"
                                      label="Default"
                                      onClick={model.setToDefault}
                            />
                        </DSVerticalStack>
                    </DSHorizontalStack>
                    <ColumnOptions selectedColumn={model.selectedColumn}/>
                </DSVerticalStack>
            </DSVerticalStack>
        );
    }
}