// import { Select } from '@alifd/next';
import Checkbox from '../checkbox';
import ConfigProvider from '../config-provider';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import cls from 'classnames';
import hoistNonReactStatics from 'hoist-non-react-statics';
import { CommonThemeProps } from '../types';
import { Select as NextSelect } from '@alifd/next';
import { getTheme } from '../utils/getTheme';
import { omitProps } from '../utils/object';

import { SelectProps as NextSelectProps } from '@alifd/next/types/select';
const { Option } = NextSelect;
interface SelectProps extends Omit<NextSelectProps, 'size'>, CommonThemeProps {
  size?: 'large' | 'medium' | 'small' | 'xs';
}
interface Pagestates {
  inited: boolean;
  renderValue: any;
}
class Select extends Component<SelectProps, Pagestates> {
  static Option = NextSelect.Option;
  static AutoComplete = NextSelect.AutoComplete;
  static OptionGroup = NextSelect.OptionGroup;
  static getDerivedStateFromProps(nextProps, prevState) {
    if (!prevState.inited) {
      return {
        inited: true,
        renderValue: nextProps.value || nextProps.defaultValue,
      };
    }
    if (nextProps.value) {
      return {
        renderValue: nextProps.value,
      };
    }
    return null;
  }

  constructor(props) {
    super(props);
    this.state = {
      inited: false,
      renderValue: null,
    };
  }

  onSelectChange = (value, actionType, item) => {
    const { onChange } = this.props;
    this.setState({
      renderValue: value,
    });
    onChange && onChange(value, actionType, item);
  };

  getSelected = item => {
    const { renderValue } = this.state;
    if (Array.isArray(renderValue)) {
      for (const value of renderValue) {
        if (typeof value === 'string' && typeof item.value === 'number' ||
          typeof value === 'number' && typeof item.value === 'string') {
          if (parseInt(String(value), 10) === parseInt(String(item.value), 10)) {
            return true;
          }
        }
        if (value === item.value) {
          return true;
        }
      }
    } else if (renderValue === item.value) {
      return true;
    }
    return false;
  };

  checkedItemRender = item => {
    const selected = this.getSelected(item);
    return (
      <Option value={item.value}>
        <Checkbox checked={selected} disabled={item.disabled}></Checkbox>
        {item.label}
      </Option>
    );
  };


  static contextTypes = {
    theme: PropTypes.string,
  };

  render() {
    const { prefix = 'next-', popupClassName, className, mode, size } = this.props;

    const theme = getTheme(this.context, this.props);

    // 多选 模式
    if (mode === 'multiple') {
      const {
        prefix = 'next-',
        className,
        dataSource,
        ...otherProps
      } = this.props;

      if (size === 'xs') {
        return (
          <NextSelect
            {...omitProps(otherProps, [ 'size' ])}
            mode="multiple"
            prefix={prefix}
            adjustTagSize
            className={cls(className, {
              [`${prefix}xs`]: size === 'xs',
              [`${prefix}white`]: theme === 'white',
              [`${prefix}grey`]: theme === 'grey',
            })}
            popupClassName={cls(popupClassName, {
              [`${prefix}white`]: theme === 'white',
              [`${prefix}grey`]: theme === 'grey',
            })}
            dataSource={dataSource}
            itemRender={this.checkedItemRender}
            onChange={this.onSelectChange}
          />
        );
      }
      return (
        <NextSelect
          {...otherProps}
          mode="multiple"
          adjustTagSize
          prefix={prefix}
          size={size as 'large' | 'medium' | 'small'}
          className={cls(className, {
            [`${prefix}white`]: theme === 'white',
            [`${prefix}grey`]: theme === 'grey',
          })}
          popupClassName={cls(popupClassName, {
            [`${prefix}white`]: theme === 'white',
            [`${prefix}grey`]: theme === 'grey',
          })}
          dataSource={dataSource}
          itemRender={this.checkedItemRender}
          onChange={this.onSelectChange}
        />
      );


    }
    if (size === 'xs') {
      const {
        prefix = 'next-',
        className,
        ...otherProps
      } = this.props;

      return (
        <NextSelect {...omitProps(otherProps, [ 'size' ])} prefix={prefix}
          popupClassName={cls(popupClassName, {
            [`${prefix}white`]: theme === 'white',
            [`${prefix}grey`]: theme === 'grey',
          })}
          className={cls(className, {
            [`${prefix}xs`]: size === 'xs',
            [`${prefix}white`]: theme === 'white',
            [`${prefix}grey`]: theme === 'grey',
          })} />
      );
    }

    return <NextSelect
      {...this.props}
      size={size as 'large' | 'medium' | 'small'}
      popupClassName={cls(popupClassName, {
        [`${prefix}white`]: theme === 'white',
        [`${prefix}grey`]: theme === 'grey',
      })}
      prefix={prefix} className={cls(className, {
        [`${prefix}white`]: theme === 'white',
        [`${prefix}grey`]: theme === 'grey',
      })} />;
  }
}

hoistNonReactStatics(Select, NextSelect);

export default ConfigProvider.config(Select);