import * as React from 'react'
import { Input, Form, Button, Icon, Modal, Header, Label, Dropdown } from 'semantic-ui-react'
export type TeamInvitationMode = "emailOnly" | "popupDialog";

export interface UsersToolbarProps {
  onInviteAdmin: Function;
  onSearchUsers: Function;
  invitationMode: TeamInvitationMode;
  roles: any[];
}
export default class UsersToolbar extends React.Component<UsersToolbarProps, {}> {
  private timeout: NodeJS.Timeout;

  state = {
    email: '',
    name: '',
    phone: '',
    searchFilter: '',
    isAddDialogOpen: false,
    roles: []
  }

  onSearchChanged = (e) => {
    this.setState({ searchFilter: e.target.value });

    if (this.timeout) {
      clearTimeout(this.timeout);
      this.timeout = null
    }

    this.timeout = setTimeout(() => {
      this.props.onSearchUsers && this.props.onSearchUsers(this.state.searchFilter);
    }, 300)
  }

  onSubmitAdmin = (e) => {
    e.preventDefault();
    const admin: any = {
      email: this.state.email,
      name: this.state.name || this.state.email,
    }

    if (this.state.roles && this.state.roles.length) {
      admin.roleIds = this.state.roles;
    }

    if (this.state.phone) {
      admin.phone = this.state.phone
    }

    this.props.onInviteAdmin && this.props.onInviteAdmin(admin);
    this.setState({ email: '', name: '', phone: null, isAddDialogOpen: false });
  }

  onOpenAddDialog = () => {
    this.setState({ isAddDialogOpen: true });
    setTimeout(() => {
      if (this.teamMateEmailInput) {
        this.teamMateEmailInput.focus();
      }
    }, 300)
  }
  teamMateEmailInput: Input;

  render() {

    const roleOptions = this.props.roles.map((role: any) => {
      return {
        key: role.id,
        text: role.name,
        value: role.id,
      }
    })

    return (
      <div className="users-toolbar">
        <Input className="users-search" icon="search" placeholder='Search...' onChange={this.onSearchChanged} />
        {this.props.invitationMode === "popupDialog" ?
          <Button
            onClick={this.onOpenAddDialog}
            className="add-teammate-button"
            icon
            labelPosition='left'>
            <Icon name='add user' />
            Add teammate
          </Button>
          :
          <form className="users-invite-form" onSubmit={this.onSubmitAdmin}>
            <Input className="users-invite"
              icon="add user" label='Invite'
              type="email"
              required
              placeholder='Your teammate email address'
              value={this.state.email}
              onChange={(e) => this.setState({ email: e.target.value })} />
          </form>
        }
        {this.state.isAddDialogOpen && <Modal
          open={true}
          // onClose={() => this.setState({ isAddDialogOpen: false })}
          closeOnDimmerClick={true}
          closeOnEscape={true}
          centered={false}>
          <Modal.Header>Add Teammate</Modal.Header>
          <Modal.Content>
            <Form className="add-teammate-form" onSubmit={this.onSubmitAdmin}>
              <Form.Field>
                <label>Email</label>
                <Input
                  ref={(i) => this.teamMateEmailInput = i}
                  icon="at"
                  iconPosition="left"
                  type="email"
                  placeholder='Teammate email' required
                  onChange={(e) => this.setState({ email: e.target.value })} />
              </Form.Field>
              <Form.Field>
                <label>Name</label>
                <Input
                  icon="universal access"
                  iconPosition="left"
                  type="text"
                  placeholder='Teammate name' required
                  onChange={(e) => this.setState({ name: e.target.value })} />
              </Form.Field>
              <Form.Field>
                <label>Role</label>
                <Dropdown
                  placeholder='Teammate Role'
                  onChange={(_, data) => this.setState({ roles: data.value })}
                  fluid
                  multiple
                  search
                  selection
                  options={roleOptions}
                />
              </Form.Field>
              <div className="buttons-group">
                <Button type="cancel" color="red" onClick={() => this.setState({ isAddDialogOpen: false })}>
                  Cancel
                </Button>
                <Button type='submit' color="blue">Let's go</Button>
              </div>
            </Form>
          </Modal.Content>
        </Modal>}
      </div >
    )
  }
}