import React from 'react';
import Dialog from 'material-ui/Dialog';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import Instance from '../../../../../components/Connection';

export default class ContactComponent 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)',
      },
      contactTypeList: [],
      selectedContact: {
        id: '',
        type: {
          key: '',
          value: '',
        },
        contact: '',
        name: '',
        desc: '',
      },
      showDescription: true,
      showName: true,
    };

    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.handleName = this.handleName.bind(this);
    this.handleDesc = this.handleDesc.bind(this);
    this.handleType = this.handleType.bind(this);
    this.handleContact = this.handleContact.bind(this);
  }

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

    Instance.getRawConn().get('/v1/nemt/users/contacttype').then(res => {
      const list = res.data.map(c => {
        return (<MenuItem value={c} primaryText={c.value} />);
      });

      this.setState(Object.assign(this.state, { contactTypeList: list }));
    }).catch(console.error);
  }

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

  setProps(propsParam) {
    const setProps = {
      buttonValue: propsParam.buttonValue,
      title: propsParam.title,
      showDescription: true,
      showName: true,
    };

    if (propsParam.showDescription !== undefined || propsParam.showDescription !== null) {
      setProps.showDescription = propsParam.showDescription;
    }

    if (propsParam.showName !== undefined || propsParam.showName !== null) {
      setProps.showName = propsParam.showName;
    }

    this.setState(Object.assign(this.state, setProps));
  }

  handleOpen() {
    this.setState(Object.assign(this.state, {
      openDialog: true,
      selectedContact: {
        id: '',
        type: {
          key: '',
          value: '',
        },
        contact: '',
        name: '',
        desc: '',
      },
    }));
  }

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

  handleSave() {
    this.setState(Object.assign(this.state, { openDialog: false }));
    if (this.props.onNewContact) {
      this.props.onNewContact(this.state.selectedContact);
    } else {
      console.log(this.state.selectedContact);
    }
  }

  handleName(e) {
    const selectedContact = this.state.selectedContact;
    selectedContact.name = e.target.value;
    this.setState(Object.assign(this.state, { selectedContact: selectedContact }));
  }

  handleContact(e) {
    const selectedContact = this.state.selectedContact;
    selectedContact.contact = e.target.value;
    this.setState(Object.assign(this.state, { selectedContact: selectedContact }));
  }

  handleDesc(e) {
    const selectedContact = this.state.selectedContact;
    selectedContact.desc = e.target.value;
    this.setState(Object.assign(this.state, { selectedContact: selectedContact }));
  }

  handleType(e, i, v) {
    const selectedContact = this.state.selectedContact;
    selectedContact.type = v;
    this.setState(Object.assign(this.state, { selectedContact: selectedContact }));
  }

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

    let nameField = (<TextField fullWidth={false} onChange={this.handleName} fullWidth={false} floatingLabelText={"Short label"} value={this.state.selectedContact.name} />);
    if (!this.state.showName) {
      nameField = null;
    }

    let descField = (<TextField onChange={this.handleDesc} fullWidth={false} floatingLabelText={"Notes"} value={this.state.selectedContact.desc} multiLine={true} rows={2} />);
    if (!this.state.showDescription) {
      descField = null;
    }

    return (
      <div style={this.state.divStyle} >
        <RaisedButton
          label={this.state.buttonValue}
          onClick={this.handleOpen}
          secondary
          fullWidth={false}
        />
        <Dialog
          contentStyle={this.state.modalStyle}
          title={this.state.title}
          actions={actions}
          modal={true}
          open={this.state.openDialog}
          onRequestClose={this.handleClose}
          autoScrollBodyContent={false}
        >
          <div className="" id="container">

            <SelectField
              floatingLabelText="Contact type"
              value={this.state.selectedContact.type}
              onChange={this.handleType}
              fullWidth={false}
            >
              {this.state.contactTypeList}
            </SelectField>
            <TextField onChange={this.handleContact} fullWidth={false} floatingLabelText={"Phone or Email"} value={this.state.selectedContact.contact} />
            {nameField}
            {descField}
          </div>
        </Dialog>
      </div>);
  }
}