import React from 'react';
import { DropDown } from './index';
import InputField from '../InputField';
import Styles from './styles'
import styled from 'styled-components';

const OtherStyles = styled.div`

margin: 0px 0px 0px 0px;

.DropDown_outerdiv {
  margin: 0px 0px 0px 0px;
  z-index: 10;
}

.DropDown_outerdiv .Select--single > .Select-control .Select-value {
  margin-top: 3px !important;
}

.DropDown_outerdiv .Select-placeholder {
  margin-top: 3px !important;
}

.Select-control {
  border: 1px solid #ccc;
  margin-top: 10px;
}

.ddWrap {
  padding : 0px;
  margin : 0px;
  margin-bottom: 10px;
  font-size: 16px;
  text-align: left;
}

.ddWrap .label {
  margin-bottom: 10px;
}

.input-field {
  width: 100%;
}

.input-field .input {
  border: 1px solid #ccc;
  padding: 10px 10px;
}

.inputField{
  width: 100%;
}

.inputField .label {
  font-size: 16px;
  margin-bottom: 6px;
  color: rgba(0,0,0,0.6);
}
`

export default class OtherDropDown extends React.Component {
  static get propTypes() {
    return {
      items: React.PropTypes.array.isRequired,
      disabled: React.PropTypes.bool,
      clearable: React.PropTypes.bool,
      placeholder: React.PropTypes.string,
      onChange: React.PropTypes.func.isRequired,
      value: React.PropTypes.array,
      label: React.PropTypes.string,
    };
  }

  constructor(props) {
    super(props)

    this.state = {
      otherSelected: false
    }
    this.constantText = this.props.constantText || 'Other'
  }

  handleChange = (val) => {
    if (val[0].value == this.constantText) {
      this.setState({ otherSelected: true })
    }
    else {
      this.setState({ otherSelected: false })
      this.props.onChange(val[0].value,false)
    }

  }

  handleItems() {
    let newItem = this.props.items.concat({
      value: this.props.constantText || "Other",
      label: this.props.constantText || "Other"
    })
    return newItem
  }

  render() {

    return (
      <OtherStyles >
        <Styles className="DropDown_outerdiv" >

          <DropDown
            label={this.props.dropDownlabel || ''}
            placeholder={this.props.dropDownplaceholder || ''}
            items={this.handleItems()}
            onChange={this.handleChange}
            clearable={this.props.clearable || false}
          />
          {
            this.state.otherSelected &&
            <InputField ref="inputValue"
              className="inputField"
              label={this.props.inputLabel || ''}
              placeholder={this.props.Inputplaceholder || ''}
              onChange={(val) => { this.props.onChange(val,true) }}
            />
          }

        </Styles>
      </OtherStyles>
    )
  }
}