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';
import { Query } from 'react-apollo';

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!  ) {
        updateBrief(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
          step
        }
    }
`;


const BRIEF_QUERY = gql`
  query($id:Int!) {
  fetchBrief(id: $id) {
        title
        appId
        content
        referenceLink
        musicLink
        footageLink
        ratioSquare
        ratioStory
        ratioFiveFour
        ratioSixteenNine
        variations
        duration
        createdAt
        step
        isPublished
        price
    }
  }
  `;


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


        this.state = {
            brief: {},
            title: '',
            content: '',
            appId: '',
            musicLink: '',
            footageLink: '',
            duration: '',
            ratioSquare: false,
            ratioStory: false,
            ratioFiveFour: false,
            ratioSixteenNine: false,
            variations: 1,
            referenceLink: '',
            isPublished: 0,
            isArchived: 0,
            isFeatured: 0,
            isAccepted: 0,
            step: 0,

        };

        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
        }));
    }

    fetchedData(brief) {
        this.setState({
            title: brief.title,
        })
    }




    render() {

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

        const id = parseInt(this.props.match.params.id);

        return (
            <>
                <Header title="Новая задача" />
                <div className="new-task-body">
                <Mutation
                    mutation={BRIEF_MUTATION}
                    variables={{ title, content, appId, musicLink, footageLink, duration, ratioSquare, ratioStory, ratioFiveFour, ratioSixteenNine, variations, referenceLink, isPublished, isArchived, isFeatured, isAccepted, step }}
                    onCompleted={() => this.props.history.push('/')}
                >
                {updateBrief => (
                    <Query query={BRIEF_QUERY} variables={{ id }} >
                    {({ loading, error, data }) => {
                        if (loading) return <div>Загрузка</div>
                        if (error) return <div>{error.message}</div>

                        const brief = data.fetchBrief;
                        this.fetchedData(brief);

                        return (
                            <>

                                <Form>
                                    <Row className="alone">
                                        <Col xs="6"> <FormGroup>
                                            <Input type="hidden" value={step} onChange={e => this.setState({ step: e.target.value })} name="appName" id="appName" placeholder="Введите название задачи" />
                                            <Input type="hidden" value={isPublished} onChange={e => this.setState({ isPublished: e.target.value })} name="appName" id="appName" placeholder="Введите название задачи" />
                                            <Input type="text" value={this.state.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 value="1">1</option>
                                                        <option value="2">2</option>
                                                        <option value="3">3</option>
                                                        <option value="4">4</option>
                                                    </Input>
                                                </FormGroup>
                                            </Col>
                                        </FormGroup>

                                    </div>

                                    <FormGroup className="save-btn">

                                                    <Button color="primary " className="save" onClick={updateBrief}>Готово</Button>

                                    </FormGroup>




                                </Form>

                            </>
                        )
                    }}
                </Query>

                )}
                </Mutation>

                </div>
            </>
        )
    }
};

export default EditTask;