import React, { Component } from 'react';
import { AUTH_TOKEN, USER_ID, USER_DATA, USER_INFO, ACTIVE_PROJECT } from '../utils/constants';
import { Container, Row, Col } from 'reactstrap';
import Plan from './Plan';


import gql from 'graphql-tag';
import { Route, withRouter } from 'react-router-dom';

import { Query } from 'react-apollo';
import { Button, Modal, ModalBody, Form, FormGroup, Label, Input } from 'reactstrap';


import { Mutation } from 'react-apollo';


const PLAN_MUTATION = gql`
    mutation($name: String!, $description: String!, $goal: Float!, $dueDate: String!, $isVerified: String!, $status: String!, $projectId: ID!, $userId: ID! ) {
        createPlan(name: $name, description: $description, goal: $goal, dueDate: $dueDate, isVerified: $isVerified, status: $status, projectId: $projectId, userId: $userId) {
          name
          description
          goal
          dueDate
          isVerified
          status
          projectId
          userId
        }
    }
`;


const  PROJECT_QUERY = gql`
  query($id: ID!) {
    user(id: $id) {
      id
      email
      firstName
      plans {
        id
        name
        description
        status
        isVerified
        goal
      }
    }
  }
`;






class PlanList extends Component {

  constructor(props) {
    super(props);


    this.state = {
      name: '',
      description: '',
      goal: 0,
      dueDate: '',
      isVerified: "0",
      status: '',
      projectId: 0,
      userId: 0,
      modal: false,
    };
    this.toggle = this.toggle.bind(this);
  }


  toggle() {
    this.setState(prevState => ({
      modal: !prevState.modal,

    }));
  }




  render() {

    const userData = JSON.parse(localStorage.getItem(USER_DATA));

    const id = userData.id;

    const {  name, description, goal, dueDate, isVerified, status } = this.state;
    console.log(userData);
    const userId = userData.id;
    const projectId = this.props.match.params.id;

    return (
      <>

        <Query query={PROJECT_QUERY} variables={{ id }}>
          {({ loading, error, data }) => {
            if (loading) return <div>Загрузка</div>
            if (error) return <div>Ошибка {error.message}</div>

            const result = data.user;
            console.log(result);


            return (
              <>
                <div className="kanban-title">
                {result.firstName } у вас {result.plans.length } Сметы
                  <span><Button onClick={this.toggle} >Новая смета</Button></span>
                </div>

                <div className="kanban-workflow">
                  <Row>


                    {result.plans ? result.plans.map(plan => <Col xs={4}><Plan key={plan.id} plan={plan} smeta={result} /></Col>) : "Сметы по этому проекту не найдены"}

                  </Row>
                </div>

                <Modal isOpen={this.state.modal} toggle={this.toggle} className="add-app-modal">
                  <ModalBody>
                    <Form>
                      <Input type="hidden" value={projectId} onChange={e => this.setState({ projectId: e.target.value })} name="projectName" id="appNaprojectNameme" />
                      <Input type="hidden" value={userId} onChange={e => this.setState({ userId: parseInt(e.target.value) })} name="userId" id="userId" />
                      <Row className="alone">
                        <Col xs={12}> <FormGroup>

                          <Input type="text" value={name} onChange={e => this.setState({ name: e.target.value })} name="appName" id="appName" placeholder="Введите название сметы" />
                        </FormGroup></Col>


                      </Row>
                        <FormGroup>
                          <Label for="content">Описание</Label>
                          <Input type="textarea" rows={3} value={description} onChange={e => this.setState({ description: e.target.value })} name="content" id="content" placeholder="Распишите подробно задачу сметы" />
                        </FormGroup>

                        <FormGroup row>
                          <Col xs={6}>
                            <Label for="exampleDatetime">Dead line</Label>
                            <Input
                              value={dueDate} onChange={e => this.setState({ dueDate: e.target.value })}
                              type="date"
                              name="dueDate"
                              id="exampleDatetime"
                            /></Col>

                          <Col xs={6}>
                            <Label for="goal">Плановая сумма трат (грн)</Label>
                            <Input
                              value={goal} onChange={e => this.setState({ goal: parseInt(e.target.value) })}
                              type="number"
                              name="goal"
                              id="goal"
                            /></Col>
                        </FormGroup>
                        <FormGroup row>
                          <Col xs={6}>

                            <Label>Одобрено директором (Только для директора)</Label>
                            <Input type="select" value={isVerified} onChange={e => this.setState({ isVerified: e.target.value })}
                              disabled={userData.role != 3 ? "disabled" : ""}
                              name="status" id="status">
                              <option value="0">- Не выбрано -</option>
                              <option value="1">Не одобрено</option>
                              <option value="2">Одобрено</option>
                              <option value="3">Не одобрено, доработать</option>
                            </Input>
                          </Col>
                          <Col xs={6}>
                            <Label>Статус</Label>
                            <Input type="select" value={status} onChange={e => this.setState({ status: e.target.value })} name="status" id="status"
                            >
                              <option value="0">Черновик</option>
                              <option value="1">В Работе</option>
                              <option value="2">Готово</option>
                            </Input>
                          </Col>
                        </FormGroup>


                      <FormGroup className="save-btn">
                        <Mutation
                          mutation={PLAN_MUTATION}
                          variables={{ name, description, goal, status, isVerified, projectId, dueDate, userId }}
                          onCompleted={() => this.props.history.go('/project' + projectId)}>
                          {
                            createPlan =>
                              <Button color="primary " className="save" onClick={createPlan}>Создать</Button>
                          }
                        </Mutation>
                      </FormGroup>
                      </Form>
                  </ModalBody>
                </Modal>


              </>
                )
              }}
        </Query>
      </>
        )
      }
    };

    export default withRouter(PlanList);