import * as React from "react";
import { hot } from "react-hot-loader";
import trim from "lib/trim";
import "./dropdown.scss";

interface IDropdownProps
    extends React.DetailedHTMLProps<
            React.SelectHTMLAttributes<HTMLSelectElement>,
            HTMLSelectElement
        > {
    list: Array<string | number>;
    label?: string;
    role?: "primary" | "accent" | "error" | "warning" | "success" | "info" ;
    outline?: boolean;
    action?(): any;
}

interface IDropdownState {
    value: number | string;
}

class Dropdown extends React.PureComponent<IDropdownProps, IDropdownState> {
    constructor(props) {
        super(props);

        this.state = { value: "" }
      }
      onChange(e) {
        this.setState({
          value: e.target.value
        })
        e.preventDefault();
        e.stopPropagation();
        this.props.action();
      }
      render() {
        return (
            <div
                className={trim(`dropdown
                    dropdown--${this.props.outline ? "outline--" : ""}${this.props.role || "default"}
                    ${this.props.disabled ? "dropdown--disabled" : ""}
                `)}
            >
                {this.props.label ? <label>{this.props.label}</label> : "no label" }
                <select
                    disabled={this.props.disabled}
                    value={this.state.value}
                    onChange={this.onChange.bind(this)}
                >
                    {this.props.list.map(x => {
                        return <option value={x} key={x} >{x}</option>
                    })}
                </select>
          </div>

        )
      }
  }

export default hot(module)(Dropdown);