import styled from 'styled-components'
import gql from 'graphql-tag'
import { Mutation, Query } from 'react-apollo'

const CREATE_PROJECT = gql`
  mutation CREATE_PROJECT($name: String!, $abbreviation: String!, $description: String) {
    createProject(name: $name, abbreviation: $abbreviation, description: $description) {
      id
    }
  }
`

const QUERY_PROJECTS = gql`
  query QUERY_PROJECTS {
    projects {
      id
      name
      abbreviation
      description
      files {
        id
        path
        name
        description
        filename
        mimetype
        size
      }
      versions {
        id
        name
        changes
        date
      }
    }
  }
`

const ProjectSelector = props => (
  <Query query={QUERY_PROJECTS}>
    {({ data, loading, error }) => {
      if (error) return (<p>Error loading project: ${error.message}</p>)
      if (loading) return (<p>Loading data...</p>)
      if (!data || !data.projects.length) return (<p>No project found.</p>)
      if (!props.value) props.onChange({ target: { name: 'project', value: data.projects[0].id } })
      const selector = (
        <select {...props}>
          {data.projects.map(project =>
            <option key={project.id} value={project.id}>{project.name}</option>
          )}
        </select>
      )
      return selector
    }}
  </Query >
)

class Project extends React.Component {
  state = {
    id: null,
    name: '',
    abbreviation: '',
    description: '',
  }

  toState = event => {
    this.setState({ [event.target.name]: event.target.value })
  }

  render() {
    return (
      <Mutation mutation={CREATE_PROJECT} variables={this.state} refetchQueries={[{ query: QUERY_PROJECTS }]}>
        {(createProject, { data, error, loading }) => (
          <form onSubmit={async event => {
            event.preventDefault()
            const { data } = await createProject()
            this.state.id = data.createProject.id
          }}>
            <h1>Project Setup</h1>
            <fieldset id='project-generic'>
              <label htmlFor='name'>Project name</label>
              <input type='text' name='name' id='name' placeholder='Project name' value={this.state.name} onChange={this.toState} />
              <label htmlFor='abbreviation'>Project abbreviation</label>
              <input type='text' name='abbreviation' id='abbreviation' placeholder='Project abbreviation' value={this.state.abbreviation} onChange={this.toState} />
              <label htmlFor='description'>Project description</label>
              <textarea name='description' id='description' placeholder='Project description' value={this.state.description} onChange={this.toState} />
            </fieldset>
            <button type='submit'>Save</button>
          </form>
        )}
      </Mutation>
    )
  }
}

export default Project
export { ProjectSelector }