import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import { Popup, Cell, DatetimePicker, Button } from '@antmjs/vantui';
import styles from './style.module.less';

export default (props) => {
  const { show, onCancel, onChange, title, ...leftProps } = props;

  const dtRef = React.useRef();

  const onConfirm = (e) => {
    if (onChange) {
      const dt = new Date(dtRef.current);
      onChange(dt);
    }
  }

  const onInput = (e) => {
    dtRef.current = e.detail;
  }
  
  return (
    <Popup show={show} position="bottom" onClose={onCancel}>
      <View className={styles['dt-pk-tt']}>
        <View>
          <Button type="default" size="small" plain onClick={onCancel}>取消</Button>
        </View>
        <View>{title}</View>
        <View>
          <Button type="primary" size="small" plain onClick={onConfirm} >确定</Button>
        </View>
      </View>
      <DatetimePicker showToolbar={false} {...leftProps} onInput={onInput} />
    </Popup>
  )
}
