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;
  orgs: any;
  createContract(input: any): void;
}

interface State {
  reason: string;
  date: Date;
  droneId: string;
  area: string;
  address: string;
}

class RequestPage extends React.Component<Props, State> {
  state = {
    reason: "",
    date: new Date(),
    droneId: "",
    area: "지역",
    address: ""
  };

  handleChangeReason = event => this.setState({ reason: event.target.value });
  handleChangeDate = (event, date) => this.setState({ date });
  handleChangeDrone = (event, index, droneId) => this.setState({ droneId });
  handleChangeArea = (event, index, area) => this.setState({ area });
  handleChangeAddress = event => this.setState({ address: event.target.value });

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

    return (
      <div className="request-page">
        <h2>허가 신청서 작성</h2>
        <TextField
          hintText="사유"
          type="text"
          value={state.reason}
          onChange={this.handleChangeReason}
          style={style}
        />
        <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>
        <DatePicker
          floatingLabelText="날짜"
          onChange={this.handleChangeDate}
          defaultDate={state.date}
          minDate={minDate}
          maxDate={maxDate}
        />
        <DropDownMenu
          maxHeight={300}
          value={state.area}
          onChange={this.handleChangeArea}
        >
          {props.orgs.map(org => (
            <MenuItem key={org.id} value={org.name} primaryText={org.name} />
          ))}
        </DropDownMenu>
        <TextField
          hintText="상세주소"
          type="text"
          value={state.address}
          onChange={this.handleChangeAddress}
          style={style}
        />
        <RaisedButton
          label="확인"
          primary={true}
          style={style}
          onClick={() => props.createContract(state)}
        />
      </div>
    );
  }
}

export default RequestPage;