/**
 * Created by baoyinghai on 11/17/16.
 */
import React from 'react';
import { VIEW, EDIT } from '../../constant';
import { Select } from '../../../../../components/mxa';


class MySelect extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: this.props.value
    };
  }

  componentWillReceiveProps(next) {
    if (next.value !== this.state.value) {
      this.state.value = next.value;
    }
  }

  _onChange = e => {
    const { onChange, router, updateMain } = this.props;
    onChange && onChange(e || null);
    this.setState({
      value: e
    });
    if (router && router.filter) {
      const tag = router.filter(r => r.value === e);
      const actionLink = tag && tag[0] && tag[0].actionLink;
      actionLink && updateMain && updateMain(actionLink, null, null, { [this.props.name]: e });
    }
  };

  // shouldComponentUpdate(nextProps, nextState) {
  //   console.log('nextProps' + nextProps + ' nextState:' + nextState);
  //   if (nextState.value) {
  //     return true;
  //   }
  //   return false;
  // }

  componentDidMount() {

  }

  render() {
    const { disabled, dictionaryItems = [] } = this.props;
    const { value } = this.state;
    const isMultiple = value && value.indexOf(',') !== -1;
    if (isMultiple) {
      return (
        <Select disabled={disabled} onChange={this._onChange} value={value}>
          <Select.Option value={value}>{value.split(',').map(item => dictionaryItems.filter(item1 => item1.code === item)[0].value).join(',')}</Select.Option>
        </Select>
      );
    }
    return (
      <Select disabled={disabled} onChange={this._onChange} value={this.state.value}>
        {dictionaryItems.map((i, index) =>
          (
            <Select.Option key={'select_' + i.code} value={i.code}>{i.value}</Select.Option>
          ))}
      </Select>
    );
  }
}


const compRender = config => {
  const { record, props, replaceMain } = config;
  let dictionaryItems = record.displayComponent && record.displayComponent.dictionaryItems;
  if (record.dictionaryFilter) {
    dictionaryItems = dictionaryItems.filter(record.dictionaryFilter);
  } else if (record.displayComponent.dictionaryFilter) {
    const dictionaryFilter = record.displayComponent.dictionaryFilter;
    dictionaryItems = dictionaryItems.filter(item => dictionaryFilter.join('').indexOf(item.code) >= 0);
  }
  return (
    <MySelect
      disabled={record.isReadonly || (props.isModalInputMappingItem && props.isLeadInto && props.modalInputIsReadonly)}
      dictionaryItems={dictionaryItems}
      router={record.routerMaps}
      name={record.name}
      updateMain={props.updateMain || replaceMain}
    />
  );
};

/* eslint-disable */
class StaticDisplay extends React.Component {
  render() {
    let value = this.props.value;
    this.props.opts && this.props.opts.forEach(item => {
      if (item.code === this.props.value) {
        value = item.value;
      }
    });
    return (
      <span>{value}</span>
    );
  }
}

export default {
  [VIEW]: config => {
    const { record } = config;
    const opts = record.displayComponent && record.displayComponent.dictionaryItems && record.displayComponent.dictionaryItems;
    return (
      <StaticDisplay opts={opts} />
    );
  },
  [EDIT]: compRender
};
