import React, { PureComponent } from "react"
import { gql } from 'apollo-boost';
import { Query, Mutation } from 'react-apollo';
import { FormGroup, ControlLabel, FormControl } from "react-bootstrap";

const QUERY_DIRECTOR = gql`
query current_genre($uuid: UUID!) {
    movieByUuid(uuid: $uuid) {
      director
    }
  }`;

const UPDATE_MOVIE_DIRECTOR_MUTATION = gql`
  mutation updateMovieDirector($uuid: UUID!, $director: String!){
    updateMovieByUuid(input: {
        uuid: $uuid
        moviePatch: {director: $director}
    }) {
      clientMutationId
    }
  }
`;

class FormDirector extends PureComponent {
    constructor(props) {
        super(props)

        this.state = {
            director: ''
        }
    }

    render() {
        const { readOnly, uuid } = this.props
        const { director } = this.state

        return (
            <FormGroup controlId="formBasicText">
                <ControlLabel>Director</ControlLabel>
                <Query query={QUERY_DIRECTOR} variables={{ uuid }} pollInterval={readOnly ? 1000 : 0} >
                    {({ loading, error, data }) => {
                        if (loading) return "Loading...";
                        if (error) return `Error! ${error.message}`;

                        readOnly && this.setState({ director: data.movieByUuid ? data.movieByUuid.director : '' })

                        return (
                            <Mutation mutation={UPDATE_MOVIE_DIRECTOR_MUTATION}>
                                {mutation => (
                                    <FormControl
                                        type="text"
                                        value={director}
                                        readOnly={readOnly}
                                        onChange={e => this.setState({ director: e.target.value })}
                                        onBlur={e => mutation({ variables: { uuid, director } })}
                                    />
                                )}
                            </Mutation>
                        )
                    }}
                </Query>
            </FormGroup>
        )
    }
}

export default FormDirector