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

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

const meetingHours = (n) => n < 8 || n > 22;
const disabledMinutes = (n) => n < 10 || n > 20;

const TimePickerDemo = () => {
  return (
    <View>
      <Text className="demo-title">Time Picker</Text>
      <View className="demo-content">
        <TimePicker placeholder="选择时、分" format="HH:mm" />
        <TimePicker placeholder="选择分、秒" format="mm:ss" />
        <TimePicker placeholder="选择时、分、秒" format="HH:mm:ss" />
        <TimePicker placeholder="选择上/下午、时、分" format="A hh:mm" />
      </View>
      <Text className="demo-title">自定义Step</Text>
      <View className="demo-content">
        <TimePicker placeholder="选择时、分" format="HH:mm" hourStep={2} minuteStep={15} />
        <TimePicker placeholder="选择时、分" format="hh:mm" hourStep={2} minuteStep={15} />
      </View>
      <Text className="demo-title">禁用选项</Text>
      <View className="demo-content">
        <TimePicker placeholder="仅可选择8:00-21:59" format="HH:mm" disabledHours={meetingHours} />
        <TimePicker placeholder="仅可选择10-20分钟" format="HH:mm" disabledMinutes={disabledMinutes} />
      </View>
      <Text className="demo-title">其他状态</Text>
      <View className="demo-content">
        <TimePicker value={new Date()} format="禁用 HH:mm" disabled />
        <TimePicker value={new Date()} format="只读 HH:mm" readOnly />
      </View>
    </View>
  );
};

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