import React, { Component } from 'react';
import { AUTH_TOKEN, USER_DATA } from '../utils/constants';
// import Navigation from '../components/Navigation';
import Header from '../components/Header';
import Kanban from '../components/Kanban';
import { Row, Col, Button, Modal, ModalBody, Form, FormGroup, Label, Input } from 'reactstrap';

import { Mutation } from 'react-apollo';
import gql from 'graphql-tag';


const BRIEF_MUTATION = gql`
    mutation($title: String!, $content: String!, $appId: Int!, $musicLink: String!, $footageLink: String!, $duration: String!, $ratioSquare: Boolean!, $ratioStory: Boolean!, $ratioFiveFour: Boolean!, $ratioSixteenNine: Boolean!, $variations: Int!, $referenceLink: String!  ) {
        addBrief(title: $title, content: $content, appId: $appId, musicLink: $musicLink, footageLink: $footageLink, duration: $duration, ratioSquare: $ratioSquare, ratioStory: $ratioStory, ratioFiveFour: $ratioFiveFour, ratioSixteenNine: $ratioSixteenNine, variations: $variations,  referenceLink: $referenceLink ) {
          title
          content
          appId
          musicLink
          footageLink
          ratioSquare
          ratioStory
          ratioFiveFour
          ratioSixteenNine
          duration
          referenceLink
          variations
        }
    }
`;


class Dashboard extends Component {
  constructor(props) {
    super(props);


    this.state = {
      title: '',
      content: '',
      appId: '',
      musicLink: '',
      footageLink: '',
      duration: '',
      ratioSquare: false,
      ratioStory: false,
      ratioFiveFour: false,
      ratioSixteenNine: false,
      variations: '',
      referenceLink: '',

    };

    this.toggleSquare = this.toggleSquare.bind(this);
    this.toggleStory = this.toggleStory.bind(this);
    this.toggleFiveFour = this.toggleFiveFour.bind(this);
    this.toggleSixteenNine = this.toggleSixteenNine.bind(this);
  }


  toggleSquare() {
    this.setState(prevState => ({
      ratioSquare: !prevState.ratioSquare
    }));
  }

  toggleStory() {
    this.setState(prevState => ({
      ratioStory: !prevState.ratioStory
    }));
  }

  toggleFiveFour() {
    this.setState(prevState => ({
      ratioFiveFour: !prevState.ratioFiveFour
    }));
  }

  toggleSixteenNine() {
    this.setState(prevState => ({
      ratioSixteenNine: !prevState.ratioSixteenNine
    }));
  }


  render() {

    const userData = JSON.parse(localStorage.getItem(USER_DATA));
    const {  title, content, appId, musicLink, footageLink, duration, ratioSquare, ratioStory, ratioFiveFour, ratioSixteenNine, variations, referenceLink } = this.state;

    return (
      <>
        <Header title="Новая задача" />
        <div className="new-task-body">
          <Form>
            <Row className="alone">
              <Col xs="6"> <FormGroup>

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

                <Input type="select" value={appId} onChange={e => this.setState({ appId: parseInt(e.target.value) })}  name="select" id="exampleSelect">
                <option value="0">Без приложения</option>
              { userData ? userData.apps.map(app => <option value={ app.id }>{ app.title }</option> ) : <option>Нет приложений</option>}

                </Input>
              </FormGroup></Col>
              <Col xs="2"><Button outline className="cancel">Отмена</Button></Col>
            </Row>
            <div className="task-box">
              <FormGroup>
                <Label for="references">Референсы</Label>
                <Input type="text" value={referenceLink} onChange={e => this.setState({ referenceLink: e.target.value })}  name="references" id="references" placeholder="Вставьте ссылку на референсы" />
              </FormGroup>
              <FormGroup>
                <Label for="content">Задача</Label>
                <Input type="textarea"  value={content} onChange={e => this.setState({ content: e.target.value })}  rows={4} name="content" id="content" placeholder="Распишите подробно задачу ролика" />
              </FormGroup>

              <FormGroup >
                <Label for="music">Музыка</Label>
              </FormGroup>


              <FormGroup row>
                <Col xs={6}>
                  <Input type="text"  value={musicLink} onChange={e => this.setState({ musicLink: e.target.value })}  name="music" id="music" placeholder="Вставьте ссылку на облако " />
                </Col>
                <Col className="reference-list" xs={3}>
                  <a><strike>Или выберете из списка</strike></a>
                </Col>
                <Col xs={3}>

                  <Input type="text" disabled name="music_name" id="music_name" placeholder="И введите название файла" />
                </Col>
              </FormGroup>

              <FormGroup >
                <Label for="footages">Футажи</Label>
              </FormGroup>


              <FormGroup row>
                <Col xs={6}>
                  <Input type="text"   value={footageLink} onChange={e => this.setState({ footageLink: e.target.value })}  name="footages" id="footages" placeholder="Вставьте ссылку на облако " />
                </Col>
                <Col className="reference-list" xs={3}>
                  <a ><strike>Или выберете из списка</strike></a>
                </Col>
                <Col xs={3}>

                  <Input type="text" disabled name="footages_name" id="footage_name" placeholder="И введите название файла" />
                </Col>
              </FormGroup>


              <FormGroup row>
                <Col xs={4}>
                <FormGroup>
                  <Label for="checkbox2" >Разрешение</Label><br></br>

                  <FormGroup check inline>


                      <Input type="checkbox" name="ratio" value={ratioSquare}  onChange={this.toggleSquare}  id="checkbox2" />
                      Квадрат

                      <Input type="checkbox" name="ratio" value={ratioStory} onChange={this.toggleStory} id="checkbox2" />
                      Сторис

                      <Input type="checkbox" name="ratio" value={ratioFiveFour} onChange={this.toggleFiveFour} id="checkbox2" />
                      5:4
                      <Input type="checkbox" name="ratio" value={ratioSixteenNine} onChange={this.toggleSixteenNine} id="checkbox2" />
                      16:9

                  </FormGroup>
                  </FormGroup>
                </Col>

                <Col xs={4}>
                <FormGroup>
                  <Label for="duration" >Длительность</Label>

                  <Input type="select"  value={duration} onChange={e => this.setState({ duration: e.target.value })}  name="duration" id="duration">
                  <option>до 10 секунд</option>
                  <option>до 15 секунд</option>
                  <option>до 20 секунд</option>
                  <option>до 25 секунд</option>
                  <option>до 30 секунд</option>
                </Input>
                </FormGroup>
                </Col>

                <Col xs={4}>
                <FormGroup>
                  <Label for="variants" >Количество вариантов</Label>

                  <Input type="select"  value={variations} onChange={e => this.setState({ variations: parseInt(e.target.value) })}  name="variants" id="variants">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                </Input>
                </FormGroup>
                </Col>
              </FormGroup>

            </div>

            <FormGroup className="save-btn">
            <Mutation
                  mutation={BRIEF_MUTATION}
                  variables={{ title, content, appId, musicLink, footageLink, duration, ratioSquare, ratioStory, ratioFiveFour, ratioSixteenNine, variations, referenceLink }}
                  onCompleted={() => this.props.history.push('/')}>
                  {
                    addBrief =>
                      <Button color="primary "  className="save" onClick={addBrief}>Готово</Button>
                  }
                </Mutation>
            </FormGroup>




          </Form>
        </div>
      </>
    )
  }
};

export default Dashboard;