import React from 'react';
import AntdSelect from 'antd/es/select';

import { ConfigConsumer } from '../config-provider';
import Icons from '../icons';
import './index.less';
import NoData from '../../icons/no-data.svg';

const { CaretDownIcon } = Icons;

const Select = props => (
  <ConfigConsumer>
    {({ getPrefixCls }) => {
      const { prefixCls: customizePrefixCls, ...restProps } = props;
      const prefixCls = getPrefixCls('select', customizePrefixCls);
      const notFoundContentCls = getPrefixCls('select-not-found-content');
      return (
        <AntdSelect
          prefixCls={prefixCls}
          suffixIcon={<CaretDownIcon />}
          notFoundContent={
            <div className={notFoundContentCls}>
              <NoData />
              <span style={{ paddingTop: 6 }}>暂无数据</span>
            </div>
          }
          {...restProps}
        />
      );
    }}
  </ConfigConsumer>
);

const Option = props => <AntdSelect.Option {...props} />;
const OptGroup = props => <AntdSelect.OptGroup {...props} />;

Select.Option = Option;
Select.OptGroup = OptGroup;

export default Select;