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

const CalendarDemo = () => {
  const [value, updateValue] = useState(new Date());
  const [rangeValue, updateRangeValue] = useState([new Date(2020, 8, 4), new Date(2020, 8, 20)]);
  const [fullscreenValue, updateFullscreenValue] = useState(new Date(2020, 8, 7));
  const [cardValue, updateCardValue] = useState(new Date(2020, 9, 18));
  const [modeV, updateMode] = useState('year');

  const maxDate = new Date(2021, 10, 7);
  const minDate = new Date(2019, 7, 6);
  const localeType = {
    weekdays: ['sun', 'mon', 'tus', 'thi', 'fou', 'fir', 'sat'],
    months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    year: '年',
    month: '月',
    day: '日',
  };

  return (
    <View>
      <Text className="demo-title">Panel Calendar</Text>
      <View className="demo-content">
        <Calendar
          shape="panel"
          value={value}
          validRange={[minDate, maxDate]}
          onSelect={(v) => updateValue(v)}
          locale={localeType}
        />
      </View>
      <Text className="demo-title">Range Calendar</Text>
      <View className="demo-content">
        <Calendar
          shape="range"
          value={rangeValue}
          validRange={[minDate, maxDate]}
          locale={localeType}
          onSelect={(v) => {
            updateRangeValue(v);
          }}
        />
      </View>
      <Text className="demo-title">Card Calendar</Text>
      <View className="demo-content">
        <Calendar
          shape="card"
          mode={modeV}
          value={cardValue}
          validRange={[minDate, maxDate]}
          locale={localeType}
          onSelect={(v) => {
            updateCardValue(v);
          }}
          onModeChange={(v) => {
            console.log('onModeChange, v:' + v);
            updateMode(v);
          }}
        />
      </View>
      <Text className="demo-title">Fullscreen Calendar</Text>
      <View className="demo-content">
        <Calendar
          shape="fullscreen"
          value={fullscreenValue}
          validRange={[minDate, maxDate]}
          locale={localeType}
          onSelect={(v) => {
            updateFullscreenValue(v);
          }}
        />
      </View>
    </View>
  );
};

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