import React from 'react';
import Dialog from 'material-ui/Dialog';
import { List, ListItem } from 'material-ui/List';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import Instance from '../../../../../components/Connection';

export default class OrganizationComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      buttonValue: '',
      openDialog: false,
      title: '',
      modalStyle: {
        width: '100%',
        maxWidth: '600px',
      },
      divStyle: {
        textAlign: 'left',
        textTransform: 'none !important',
        padding: '0px 5px 0px 0px',
        marginTop: -5,
        boxShadow: 'none',
        color: 'rgba(0, 0, 0, 0.3)',
      },
      location: {
        lat: 41.819078,
        long: -87.623129,
      },
      searchValue: '',
      searchOrganizations: [],
      selectedOrganizations: [],
      searchingOrganizations: false,
    };

    this.handleOpen = this.handleOpen.bind(this);
    this.handleClose = this.handleClose.bind(this);
    this.setProps = this.setProps.bind(this);
    this.handleSave = this.handleSave.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
    this.handleOrganization = this.handleOrganization.bind(this);
  }

  componentDidMount() {
    this.setProps(this.props);
  }

  componentWillReceiveProps(nextProps) {
    this.setProps(nextProps);
  }

  setProps(propsParam) {
    this.setState(Object.assign(this.state, { buttonValue: propsParam.buttonValue, title: propsParam.title }));
  }

  handleOpen() {
    this.setState(Object.assign(this.state, { openDialog: true }));
  }

  handleClose() {
    this.setState(Object.assign(this.state, { openDialog: false }));
  }

  handleSave() {
    this.setState(Object.assign(this.state, { openDialog: false }));
    if (this.props.onSelectOrganization) {
      this.props.onSelectOrganization(this.state.selectedOrganizations);
    }
  }

  handleOrganization(e, a) {
    let selectedOrganizations = this.state.selectedOrganizations;
    selectedOrganizations.push(a);
    this.setState(Object.assign(this.state, {
      selectedOrganizations: selectedOrganizations,
      searchValue: a.name,
    }));
  }

  handleSearch(e) {
    this.setState(Object.assign(this.state, { searchValue: e.target.value }));
    if (e.target.value.length >= 3 && !this.state.searchingOrganizations) {
      this.setState(Object.assign(this.state, { searchingOrganizations: true }));
      let url = '/v1/nemt/organization/name?name=' + encodeURIComponent(e.target.value);
      if (this.props.searchType) {
        switch (this.props.searchType) {
          case 'parent':
          case 'child':
            url += '&type=' + encodeURIComponent(this.props.searchType);
            break;
        }
      }

      Instance.getRawConn().get(url).then(res => {
        const list = res.data.map(p => {
          return (<ListItem value={p.id} primaryText={p.name} secondaryText={p.type.name} key={p.id} onClick={(e) => this.handleOrganization(e, p)} />);
        });
        this.setState(Object.assign(this.state, { searchOrganizations: list, searchingOrganizations: false }));
      }).catch(console.error);
    }
  }

  render() {

    let actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onClick={this.handleClose}
      />,
      <FlatButton
        label="Add Organization"
        primary={true}
        keyboardFocused={true}
        onClick={this.handleSave}
      />,
    ];

    return (
      <div style={this.state.divStyle} >
        <RaisedButton
          label={this.state.buttonValue}
          onClick={this.handleOpen}
          secondary
          fullWidth={true}
        />
        <Dialog
          contentStyle={this.state.modalStyle}
          title={this.state.title}
          actions={actions}
          modal={true}
          open={this.state.openDialog}
          onRequestClose={this.handleClose}
          autoScrollBodyContent={true}
        >
          <div className="" id="container">
            <TextField onChange={this.handleSearch} fullWidth={true} floatingLabelText={"Type the organization name"} value={this.state.searchValue} />
            <List>
              {this.state.searchOrganizations}
            </List>
          </div>
        </Dialog>
      </div>);
  }
}