import { createVNode as _createVNode } from "vue";
import { defineComponent, ref, Transition } from "vue";
import CalendarHeader from './CalendarHeader';
import MonthCalendar from "./MonthCalendar";
import YearCalendar from "./YearCalendar";
import RangeCalendar from "./RangeCalendar";
import useCalendar from "./useCalendar";
const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
const Calendar = defineComponent({
  name: 'x-calendar',
  props: {
    prefixCls: {
      default: 'x-calendar'
    },
    value: Object,
    selectedValue: Array,
    disabledDate: Function,
    onSelect: Function,
    onHover: Function
  },
  emits: ['change', 'panelChange'],

  setup(props) {
    const {
      valueRef,
      datesRef,
      prevMonth,
      nextMonth,
      isSelected,
      isInRange,
      onSelect
    } = useCalendar(props);
    const visible = ref(false);

    function showMonthPanel() {
      visible.value = true;
    }

    function onSelectMonth(m) {
      valueRef.value = m;
      visible.value = false;
    }

    return () => {
      const {
        prefixCls
      } = props;
      const value = valueRef.value;
      const trs = Array(6);

      for (let i = 0; i < 6; i++) {
        const tds = Array(7);

        for (let j = 0; j < 7; j++) {
          var _props$disabledDate, _props$onHover;

          const passed = i * 7 + j;
          const date = datesRef.value[passed];
          const disabled = (_props$disabledDate = props.disabledDate) === null || _props$disabledDate === void 0 ? void 0 : _props$disabledDate.call(props, date);
          const isPrevGroup = date.year() < value.year() || date.month() < value.month();
          const isNextGroup = date.year() > value.year() || date.month() > value.month();
          const selected = isSelected(date, 'day');
          const inRange = isInRange(date, 'day');
          const cls = {
            [`${prefixCls}_cell`]: true,
            [`${prefixCls}_cell-disabled`]: disabled,
            [`${prefixCls}_cell-selected`]: selected,
            [`${prefixCls}_cell-in-range`]: inRange,
            [`${prefixCls}_cell-prev`]: isPrevGroup,
            [`${prefixCls}_cell-next`]: isNextGroup,
            [`${prefixCls}_cell-this`]: date.isSame(Date.now(), 'day')
          };
          tds[j] = _createVNode("td", {
            "key": passed,
            "class": cls,
            "role": "gridcell",
            "onClick": disabled || onSelect.bind(null, date),
            "onMouseenter": disabled || ((_props$onHover = props.onHover) === null || _props$onHover === void 0 ? void 0 : _props$onHover.bind(null, date))
          }, [_createVNode("div", {
            "class": `${prefixCls}_cell_text`,
            "aria-selected": selected,
            "aria-disabled": disabled
          }, [date.date()])]);
        }

        trs[i] = _createVNode("tr", null, [tds]);
      }

      return _createVNode("div", {
        "class": prefixCls
      }, [_createVNode(CalendarHeader, {
        "prefixCls": prefixCls,
        "title": value.format('YYYY年M月'),
        "onPrev": prevMonth,
        "onNext": nextMonth,
        "onPanelChange": showMonthPanel
      }, null), _createVNode("table", {
        "class": `${prefixCls}_table `,
        "cellspacing": "2"
      }, [_createVNode("thead", null, [_createVNode("tr", {
        "role": "row"
      }, [weekdays.map((day, i) => _createVNode("th", {
        "role": "columnheader",
        "title": day,
        "class": `${prefixCls}_th`
      }, [_createVNode("span", {
        "class": `${prefixCls}_th-text`
      }, [day])]))])]), _createVNode("tbody", null, [trs])]), _createVNode(Transition, {
        "name": "calendar-ain"
      }, {
        default: () => [visible.value ? _createVNode(MonthCalendar, {
          "value": value,
          "style": 'position: absolute; top:0; left:0;',
          "onSelect": onSelectMonth
        }, null) : null]
      })]);
    };
  }

});

Calendar.install = app => {
  app.component(Calendar.name, Calendar);
  app.component(MonthCalendar.name, MonthCalendar);
  app.component(YearCalendar.name, YearCalendar);
  app.component(RangeCalendar.name, RangeCalendar);
};

export default Calendar;