import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import { DatePicker } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';

const { YearPicker, MonthPicker, RangePicker } = DatePicker;

import '../../components/index.css';

const disableEvenYear = (d, type) => type === 'year' && d.getFullYear() % 2 === 0;
const disableEvenMonth = (d, type) => type === 'month' && d.getMonth() % 2 !== 0;
const disableEvenDay = (d, type) => type === 'date' && d.getDate() % 2 === 0;
const today = new Date();
// 七天内
const validRange = [today, new Date(today.getTime() + 7 * 24 * 3600 * 1000)];

const DatePickerDemo = () => {
  const handleChange = (d) => console.log(d);

  return (
    <View>
      <Text className="demo-title">Date Picker</Text>
      <View className="demo-content">
        <DatePicker placeholder="选择日期" onChange={handleChange} />
        <YearPicker placeholder="选择年" onChange={handleChange} />
        <MonthPicker placeholder="选择月份" onChange={handleChange} />
        <RangePicker placeholder="选择日期区间" onChange={handleChange} />
        <DatePicker placeholder="选择日期和时间" onChange={handleChange} showTime={true} validRange={validRange} />
        <DatePicker
          placeholder="选择日期和时间，并且自定义时间"
          onChange={handleChange}
          showTime={{
            format: 'HH:mm:ss',
            minuteStep: 15,
          }}
          validRange={validRange}
        />
      </View>
      <Text className="demo-title">Custom disable</Text>
      <View className="demo-content">
        <DatePicker placeholder="选择日期" onChange={handleChange} disabledDate={disableEvenDay} />
        <YearPicker placeholder="选择年" onChange={handleChange} disabledDate={disableEvenYear} />
        <MonthPicker placeholder="选择月份" onChange={handleChange} disabledDate={disableEvenMonth} />
      </View>
    </View>
  );
};

// render(<DatePickerDemo />, null, { driver: DriverUniversal });
 export default DatePickerDemo