import * as R from "ramda";
import * as React from "react";
import { Link } from "react-router-dom";
import DropDownMenu from "material-ui/DropDownMenu";
import MenuItem from "material-ui/MenuItem";
import TextField from "material-ui/TextField";
import RaisedButton from "material-ui/RaisedButton";

require("./styles.scss");

interface State {
  modelId: string;
  name: string;
}

interface Props {
  models: Array<any>;
  registerDrone(input: any): void;
}

const style = {
  width: "100%"
};

class DronePage extends React.Component<Props, State> {
  state = {
    modelId: "",
    name: ""
  };

  handleChangeModel = (event, index, modelId) => this.setState({ modelId });
  handleChangeName = event => this.setState({ name: event.target.value });

  public render() {
    const { props, state } = this;
    return (
      <div className="drone-page">
        <h2>드론등록</h2>
        <TextField
          hintText="이름"
          type="text"
          value={state.name}
          onChange={this.handleChangeName}
          style={style}
        />
        <h3>모델</h3>
        <DropDownMenu
          maxHeight={300}
          value={state.modelId}
          onChange={this.handleChangeModel}
        >
          {props.models.map(model => (
            <MenuItem
              key={model.id}
              value={model.id}
              primaryText={`${model.name}`}
            />
          ))}
        </DropDownMenu>
        <RaisedButton
          label="등록하기"
          primary={true}
          style={style}
          onClick={() => props.registerDrone(state)}
        />
      </div>
    );
  }
}

export default DronePage;