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

const CustomChildren = ({ extra, onClick, children, style }) => (
  <div
    onClick={onClick}
    className={styles.container}
    style={style}
  >
    <div className={styles.children}>{children}</div>
    <div className={styles.extra}>{extra}</div>
  </div>
);

export default function DatePickerDiy({ onChange, name, value, style }) {
  return (
    <DatePicker
      mode="date"
      title={name}
      extra={value ? moment(value).format('YYYY-MM-DD') : null}
      value={value ? moment(value).toDate() : null}
      onChange={date => onChange(moment(date).format('YYYY-MM-DD'))}
    >
      <CustomChildren style={style}>{name}</CustomChildren>
    </DatePicker>
  );
}
