import React from 'react';
import AntDatePicker from 'antd/es/date-picker';

import ConfigProvider, {
  ConfigConsumer,
  getPrefixCls as getPrefixCls2,
} from '../config-provider';
import './index.less';
import zhCN from 'antd/lib/locale/zh_CN';
// import moment from 'moment';
// import 'moment/locale/zh-cn';
// moment.locale('zh-cn');
import Icons from '../icons';
const { CalendarIcon, ArrowRightIcon } = Icons;

const DatePicker = props => (
  <ConfigProvider locale={zhCN}>
    <ConfigConsumer>
      {({ getPrefixCls }) => {
        const { prefixCls: customizePrefixCls, ...restProps } = props;
        const prefixCls = getPrefixCls('picker', customizePrefixCls);
        return (
          <AntDatePicker
            prefixCls={prefixCls}
            suffixIcon={<CalendarIcon fill="currentColor" fontSize="inherit" />}
            {...restProps}
          />
        );
      }}
    </ConfigConsumer>
  </ConfigProvider>
);

const RangePicker = props => {
  const { prefixCls: customizePrefixCls, ...restProps } = props;
  const prefixCls = getPrefixCls2('picker', customizePrefixCls);
  return (
    <ConfigProvider locale={zhCN} autoInsertSpaceInButton={false}>
      <AntDatePicker.RangePicker
        prefixCls={prefixCls}
        suffixIcon={<CalendarIcon fill="currentColor" fontSize="inherit" />}
        separator={
          <span aria-label="to" className={`${prefixCls}-separator`}>
            <ArrowRightIcon fill="currentColor" fontSize="inherit" />
          </span>
        }
        {...restProps}
      />
    </ConfigProvider>
  );
};

DatePicker.RangePicker = RangePicker;

export default DatePicker;