import * as React from "react";
import { observer } from "mobx-react";
import { GridColumnModel } from "./model";
import { action } from "mobx";
import { DSEditBox, DSButton, DSSelect, DSText, Option } from "@dewesoft-web/ui/controls";
import { DSHorizontalStack } from "@dewesoft-web/ui/layout";
import { DSGridModel } from "./model/DSGridModel";

export interface ColumnSelectorProps {
    model : DSGridModel;
    searchBox? : boolean;
    groupToggle? : boolean;
    groupBySelect? : boolean;
}

@observer
export class ColumnSelector extends React.Component<ColumnSelectorProps, any> {

    props : ColumnSelectorProps;

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

        this.search = this.search.bind(this);
        this.onFilterChanged = this.onFilterChanged.bind(this);
        this.toggleGroups = this.toggleGroups.bind(this);
        this.onSearchIconClicked = this.onSearchIconClicked.bind(this);
    }

    @action
    columnChange(col : GridColumnModel) {
        col.setVisible(!col.visible);
    }

    toggleGroups() {
        this.props.model.setShowGroups(!this.props.model.showGroups);
    }

    onFilterChanged(value : string) {
        const model : DSGridModel = this.props.model;

        model.setGroupBy(value);
    }

    search(e) {
        this.props.model.searchQuery = e.target.value;
    }

    onSearchIconClicked() {
        if (this.props.model.searchQuery.length !== 0) {
            this.props.model.searchQuery = "";
        }
    }

    renderGroupBySelect() {
        return [
            <DSText key={0}
                    fontSize="12px"
                    width="65px"
                    alignSelf="center"
                    marginRight="5px"
                    marginLeft="0"
                    style={{textAlign:"right"}}
                    text="Group by:"
            />,
            <DSSelect key={1}
                      name="filter"
                      value={this.props.model.groupByColumn}
                      onChange={this.onFilterChanged}
                      fontFamily="Arial" height="100%">
                {
                    this.props.model.getColumnDescriptors().map(function(col) {
                        return <Option key={col.value} value={col.value} description={col.description} />;
                    })
                }
            </DSSelect>
        ];
    }

    render() {
        const { groupToggle, searchBox, groupBySelect, model } = this.props;

        return (
            <div style={{ marginBottom: "5px" }}>
                <DSHorizontalStack align="left">
                    { searchBox &&
                    <DSEditBox height="100%"
                               width="100%"
                               span="100%"
                               name="gridSearchBox"
                               placeholder="Search"
                               iconRight={model.searchIcon}
                               value={model.searchQuery}
                               onKeyUp={this.search}
                               onIconClicked={this.onSearchIconClicked}
                               elementStyle={{
                                   marginRight: "5px",
                                   width: "20%"
                               }}
                    />
                    }
                    { groupToggle && <DSButton name="groups" onClick={this.toggleGroups} width="95px" label="Toggle groups"/> }
                    { groupBySelect && this.renderGroupBySelect() }
                </DSHorizontalStack>
            </div>
        );
    }
}