import * as React from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";
import TextField from "material-ui/TextField";
import RaisedButton from "material-ui/RaisedButton";

require("./styles.scss");

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

interface Props {
  org: any;
  confirm: Function;
  reject: Function;
}

class Tester extends React.Component<any> {
  state = { review: "" };
  handleChangeReview = event => this.setState({ review: event.target.value });
  public render() {
    const { props, state } = this;
    const { id, confirm, reject } = props;
    return (
      <div>
        <RaisedButton
          label="승인"
          primary={true}
          style={style}
          onClick={() => confirm(id, state.review)}
        />
        <hr />
        <TextField
          hintText="사유"
          type="text"
          value={state.review}
          onChange={this.handleChangeReview}
          style={style}
        />
        <RaisedButton
          label="반려"
          primary={true}
          style={style}
          onClick={() => reject(id, state.review)}
        />
      </div>
    );
  }
}

class JudgePage extends React.Component<Props> {
  public render() {
    const { props, state } = this;
    const { org } = props;
    return (
      <div className="judge-page">
        <h2>신청서</h2>
        <ul>
          {org.contracts
            .filter(contract => contract.status === "wait")
            .map(contract => (
              <li key={contract.id}>
                <h3>사유</h3>
                <p>{contract.reason}</p>
                <h3>주소</h3>
                <p>{contract.address}</p>
                <h3>드론</h3>
                <p>
                  {contract.drone.name}({contract.drone.model.name})
                </p>
                <Tester
                  id={contract.id}
                  confirm={props.confirm}
                  reject={props.reject}
                />
                <br />
              </li>
            ))}
        </ul>
      </div>
    );
  }
}

export default JudgePage;