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

require("./styles.scss");

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

interface Props {
  user: any;
  createDataset(input: any): void;
}

interface State {
  comment: string;
  droneId: string;
}

class RequestPage extends React.Component<Props, State> {
  state = {
    comment: "",
    droneId: ""
  };

  handleChangeComment = event => this.setState({ comment: event.target.value });
  handleChangeDrone = (event, index, droneId) => this.setState({ droneId });

  public render() {
    const { props, state } = this;
    const minDate = new Date();
    const maxDate = new Date();
    maxDate.setDate(maxDate.getDate() + 90);
    const { createDataset } = props;

    return (
      <div className="dataset-page">
        <h2>데이터셋 등록</h2>
        <TextField
          hintText="설명"
          type="text"
          value={state.comment}
          onChange={this.handleChangeComment}
          style={style}
        />
        <h3>파일</h3>
        <input type="file" />
        <h3>촬영한 드론</h3>
        <DropDownMenu
          maxHeight={300}
          value={state.droneId}
          onChange={this.handleChangeDrone}
        >
          {props.user.drones.map(drone => (
            <MenuItem
              key={drone.id}
              value={drone.id}
              primaryText={`${drone.name} (${drone.model.name})`}
            />
          ))}
        </DropDownMenu>
        <RaisedButton
          label="확인"
          primary={true}
          onClick={() => createDataset(state)}
        />
      </div>
    );
  }
}

export default RequestPage;