import React, { Component } from 'react'
import { Form, Button, Container, Header } from 'semantic-ui-react'
import TopMenu from '../components/TopMenu'

import { makeFunctionSafe } from '../../shared/safe-function'
import { getAllZones } from '../../service/zones'
import { createUser } from '../../service/user'
import MessageModalManager from '../components/message-modals/message-modal-manager'

/**
 * Component that represents the form to create users.
 * @extends Component
 */
export class CreateUserForm extends Component {

  state = {
    username: '',
    password: '',
    zone: '',
    rwUsername: ''
  }

  onSubmit = e => {
    e.preventDefault()
    this.props.onSubmit(this.state)
  }

  render() {
    const {zones} = this.props
    const {username, password, zone, rwUsername} = this.state
    return (
      <Form>
        <Form.Input
          label="Username"
          placeholder="Username"
          value={username}
          onChange={e => this.setState({username: e.target.value})} />

        <Form.Input
          label="Password"
          placeholder="Password"
          type="password"
          value={password}
          onChange={e => this.setState({password: e.target.value})} />

        <Form.Dropdown
          label="Zona"
          placeholder='Zona'
          fluid selection
          options={zones}
          onChange={(e, data) => this.setState({zone: data.value})} />

        <Form.Input
          label="Username no Rentway"
          placeholder="Username no Rentway"
          value={rwUsername}
          onChange={e => this.setState({rwUsername: e.target.value})} />

        <Button
          type="submit"
          floated="right"
          positive
          disabled={(!username || !password || !zone || !rwUsername)}
          onClick={this.onSubmit}>Criar</Button>
      </Form>
    )
  }
}

/**
 * Component that represents the page to create users.
 * @extends Component
 */
class CreateUserPage extends Component {

  state = {zones: []}

  componentDidMount() {
    makeFunctionSafe(async () => {
      const zonesIds = await getAllZones()
      const zones = zonesIds.map(id => ({text: id, value: id}))
      this.setState({zones})
    })()
  }

  onSubmit = makeFunctionSafe(async user => {
    const data = await createUser(user)
    MessageModalManager.openModal(data)
  })

  render() {
    return (
      <div>
        <TopMenu activeItem='users' />
        <Container>
          <Header as="h2" content="Criar novo utilizador"/>
          <CreateUserForm zones={this.state.zones} onSubmit={this.onSubmit}/>
        </Container>
      </div>
    )
  }
}

export default CreateUserPage