import React from "react";

import "./App.css";


const MyInput = ({ value, onChange }) => (
  <input value={value} onChange={onChange} />
)

const Task = ({ id, name, descr, priority }) => (
  <div>
    <div>{id}</div>
    <div>{name}</div>
    <div>{descr}</div>
    <div>{priority}</div>
  </div>
);

class ClassComponent extends React.Component {
  state = {
    tasks: [],
    id: 1,
    name: 'Task name',
    descr: 'Task description',
    prior: 123,
  };

  handleChange = (event) => {
    const newValue = event.target.value;
    this.setState(state => ({ name: newValue  }));
  };
  PushNewTask = () => {
    this.setState(state => ({ id: state.id + 1 }));
    const taski = {
      id: this.state.id,
      name: this.state.name,
      descr: this.state.descr,
      prior: this.state.prior,
    }
    this.setState(state => (state.tasks.push(taski)));
  };
  byField = (field) => {
    return ((a, b) => a[field] > b[field] ? 1 : -1);
  }

  render() {

    return (
      <div className="app">
        <MyInput
          onChange={this.handleChange}
        />
        <MyInput
          onChange={this.handleChange}
        />
        <MyInput
          onChange={this.handleChange}
        />
        <button className="content" onClick={() => this.PushNewTask()}>
          {"Добавить задание"}
        </button>
        <button className="content" onClick="this.state.tasks.sort(this.byField('name'))">
          {"Сортировать по имени"}
        </button>
        <button className="content" onClick={() => sortByPriority(this.state.tasks)}>
          {"Сортировать по приоритету"}
        </button>
        <button className="content" onClick={this.state.tasks.sort(this.byField('id'))}>
          {"Сортировать по id"}
        </button>
        <div>
          {this.state.tasks.map(task => <Task id={task.id} name={task.name} descr={task.descr} priority={task.prior} />)}
        </div>
      </div>
    );
  }
}

const App = () => {
  return (
    <ClassComponent/>
  )
}

export default App;