import React from 'react';
import AntTimePicker from 'antd/es/time-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');
zhCN.DatePicker.lang.ok = '确认';
import Icons from '../icons';
const { ClockCircleIcon, ArrowRightIcon } = Icons;

const TimePicker = props => (
  <ConfigProvider locale={zhCN} autoInsertSpaceInButton={false}>
    <ConfigConsumer>
      {({ getPrefixCls }) => {
        const { prefixCls: customizePrefixCls, ...restProps } = props;
        const prefixCls = getPrefixCls('picker', customizePrefixCls);
        return (
          <AntTimePicker
            prefixCls={prefixCls}
            suffixIcon={
              <ClockCircleIcon 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}>
      <AntTimePicker.RangePicker
        prefixCls={prefixCls}
        suffixIcon={<ClockCircleIcon fill="currentColor" fontSize="inherit" />}
        separator={
          <span aria-label="to" className={`${prefixCls}-separator`}>
            <ArrowRightIcon fill="currentColor" fontSize="inherit" />
          </span>
        }
        {...restProps}
      />
    </ConfigProvider>
  );
};

TimePicker.RangePicker = RangePicker;

export default TimePicker;