import React, { Component } from "react";

class Inner extends Component {
  defaultValue = {
    taskDescription: "",
    vehicleClean: ""
  };
  constructor() {
    super();
    this.state = [
        {
          taskDescription: "",
          vehicleClean: ""
        }
      ];
  }

  changeClean = e => {
    let clean = e.target.value;
    console.log(this);
    this.setState({
      vehicleClean: this.state.vehicleClean.concat(clean)
    });
    console.log(this.state.vehicleClean);
  };
  changeDescription = e => {
    // console.log(e.target.value);
    let description = e.target.value;
    this.setState({
      taskDescription: description
    });
  };

  componentWillMount = () => {
    this.showInner();
  };

  showInner = () => {
    this.setState( this.state.push(Object.assign({}, this.defaultValue)));
    console.log(result);
    taskModel = result.map((item, index) => (
      <span key={index}>
        <select
          name="vehicleClean"
          className="vehicle-clean"
          onChange={e => this.changeClean(e)}
        >
          <option value="">請選</option>
          <option value="洗車">洗車</option>
          <option value="租車">租車</option>
          <option value="內飾">內飾</option>
          <option value="打蠟">打蠟</option>
          <option value="貼膜">貼膜</option>
        </select>
        <input
          type="text"
          name="taskDescription"
          className="taskZheng"
          value={this.state.description}
          onChange={e => this.changeDescription(e)}
        />
        <br />
      </span>
    ));
  };

  render() {
    return <span>{taskModel}</span>;
  }
}

export default class AddTask extends Component {
  constructor() {
    super();
    this.state = {
      taskWarn: "",
      taskHelper: ""
    };
  }

  addInner = e => {
    e.preventDefault();
    this.refs.get.showInner();
    this.setState({
      taskWarn: ""
    });
  };

  render() {
    return (
      <li>
        <label className="title">月任務量</label>
        <div className="table-content">
          <div className="task-container">
            <Inner ref="get" />
          </div>
          <button
            className="add-button"
            id="add-button"
            onClick={e => this.addInner(e)}
          >
            新增
          </button>
        </div>
        <div className="error">
          <span id="cleanWarn" className={this.state.taskWarn}>
            {this.state.taskHelper}
          </span>
        </div>
      </li>
    );
  }
}