import gql from 'graphql-tag'
import { Query, Mutation } from 'react-apollo'
import { ProjectSelector } from './ProjectForm'

const CREATE_PROJECT_VERSION = gql`
  mutation CREATE_PROJECT_VERSION($name: String!, $date: String!, $project: ID!, $changes: [String]!) {
    createProjectVersion(name: $name, date: $date, project: $project, changes: $changes) {
      id
    }
  }
`

const ProjectVersionFields = props => (
  <fieldset>
    {props.title && <legend>{props.title}</legend>}
    <label htmlFor='name'>Name</label>
    <input type='text' name='name' id='name' placeholder='Project version name' value={props.state.name} onChange={props.onChange} />
    <label htmlFor='date'>Date</label>
    <input type='date' name='date' id='date' placeholder='Project date' value={props.state.date} onChange={props.onChange} />
    <label htmlFor='change'>Changes</label>
    <input type='text' name='change' id='change' placeholder='Project change' value={props.state.change} onChange={props.onChange} /><button onClick={props.addChange}>Add</button>
  </fieldset>
)

const ProjectVersionState = {
  id: null,
  name: '',
  date: '',
  change: '',
  changes: [],
  project: null,
}

class ProjectVersionForm extends React.Component {
  state = {
    ...ProjectVersionState,
    ...this.props.projectVersion
  }

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

  addChange = event => {
    event.preventDefault()
    const newChanges = this.state.changes
    newChanges.push(this.state.change)
    this.setState({ changes: newChanges, change: '' })
  }

  render() {
    return (
      <Mutation mutation={CREATE_PROJECT_VERSION} variables={this.state}>
        {(createProjectVersion, { data, error, loading }) => (
          <form onSubmit={async event => {
            event.preventDefault()
            const { data } = await createProjectVersion()
            this.state.id = data.createProjectVersion.id
          }}>
            <ProjectVersionFields title="Project Version" state={this.state} addChange={this.addChange} onChange={this.toState} />
            {this.state.changes.map((change, index) => <p key={index}>{change}</p>)}
            {this.props.project || <ProjectSelector name='project' id='project' value={this.state.project} onChange={this.toState} />}
            <button type='submit'>Save</button>
          </form>
        )}
      </Mutation>
    )
  }
}

export default ProjectVersionForm
export { ProjectVersionFields, ProjectVersionState }