import React, { Component } from "react";
// import cx from "classnames";
import style from "./../index.less";
import selectSex from '../../../common/images/selectSex.png'
import { CLEARMENSTRUATIONTEXTDATA, } from '@store/types/menstruationHistory';
import store from '@store';
export default class Select extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      isOpen: false, 
      value: "",
      options: [
        {
          label: 'patientSex',
          id: 'patientSex',
          value: 1,
          title: '性别',
          maxlength: 11
        },
        {
          label: 'patientSex',
          id: 'patientSex',
          value: 2,
          title: '性别',
          maxlength: 11
        },
      ]
    };
    this.toggleContainer = React.createRef();
    this.onClickHandler = this.onClickHandler.bind(this)
    this.onClickOutsideHandler = this.onClickOutsideHandler.bind(this)
    this.onChange = this.onChange.bind(this)
  }
  componentDidMount() {
    window.addEventListener("click", this.onClickOutsideHandler);
    this.setState({
      value: this.props.default,
    });
  }

  componentWillUnmount() {
    window.removeEventListener("click", this.onClickOutsideHandler);
  }

  componentWillReceiveProps(nextProps){
    if (nextProps.default.value !== this.state.value.value) {
      this.setState({
        value: nextProps.default
      })
    }
  }

  onClickHandler() {
    this.setState(currentState => ({
      isOpen: !currentState.isOpen
    }));
  };

  onClickOutsideHandler(event) {
    if (
      this.state.isOpen &&
      !this.toggleContainer.current.contains(event.target)
    ) {
      this.setState({ isOpen: false });
    }
  };

  onChange(e,val) {
    e.stopPropagation()
    this.setState({
      value: val,
      isOpen: false
    });
    this.props.onChange(val);
    store.dispatch({
      type: CLEARMENSTRUATIONTEXTDATA,
    });
  };
  render() {
    const { isOpen, value, options} = this.state;
    const { label,  placeholder } = this.props;
    return (
      <div className={style.selectBox}>
        {label && <label className={style.label}>{label}:</label>}

        <div className={style.select} ref={this.toggleContainer}>
          <input
            className={[style.selfInput, isOpen ? style.selfInput : ''].join('')}
            readonly=""
            value={value.value=== 2? '女' : '男'}
            onClick={this.onClickHandler}
            placeholder={placeholder}
          />
          <div className={style.down} onClick={this.onClickHandler}>
            <img src={selectSex} alt=""/>
          </div>
          <div  className={[isOpen ? '' : style.optionsHidden, isOpen ? style.options :''].join('')}>
            {options &&
              options.map((item) => {
                return (
                  <div
                    key={item.id}
                    className={style.item}
                    onClick={(e)=>this.onChange( e, item)}
                  >
                    {item.value === 2 ? '女' : '男'}
                  </div>
                );
              })}
          </div>
        </div>
      </div>
    );
  }
}