import React from 'react';
import { DatePicker, Flex } from 'antd-mobile';
import styles from './index.less';
import CalendarIcon from './CalendarIcon';
import moment from 'moment';

const CustomChildren = ({ extra, onClick, children, style }) => (
  <div
    onClick={onClick}
    style={{ height: '45px', lineHeight: '45px', padding: '0 15px', ...style }}
  >
    {extra}
  </div>
);

export default function DateRangePicker({ beginKey, endKey, values, onChange, mode='date', formatter='YYYY-MM-DD' }) {
  return (
    <Flex className={styles.container}>
      <Flex.Item>
        <DatePicker
          mode={mode}
          title="开始时间"
          extra="开始时间"
          value={values[beginKey] ? moment(values[beginKey]).toDate() : null}
          onChange={date => onChange({ ...values, [beginKey]: moment(date).format(formatter) })}
        >
          <CustomChildren style={{ textAlign: 'right' }} />
        </DatePicker>
      </Flex.Item>
      <Flex.Item style={{ flex: '0 0 auto' }}>至</Flex.Item>
      <Flex.Item>
        <Flex align='center'>
          <DatePicker
            mode={mode}
            title="结束时间"
            extra="结束时间"
            value={values[endKey] ? moment(values[endKey]).toDate() : null}
            onChange={date => onChange({ ...values, [endKey]: moment(date).format(formatter) })}
          >
            <CustomChildren style={{ textAlign: 'left' }} />
          </DatePicker>
          <CalendarIcon />
        </Flex>
      </Flex.Item>
    </Flex>
  );
}
