import { createVNode as _createVNode } from "vue";
import { defineComponent, ref, Transition } from "vue";
import moment from 'moment';
import CalendarHeader from "./CalendarHeader";
import YearCalendar from "./YearCalendar";
import useCalendar from "./useCalendar";
const monthsShort = moment().localeData().monthsShort();
export default defineComponent({
  name: 'x-month-calendar',
  props: {
    prefixCls: {
      default: 'x-month-calendar'
    },
    value: Object,
    selectedValue: Array,
    disabledDate: Function,
    onSelect: Function
  },
  emits: ['change', 'panelChange'],

  setup(props, {
    emit
  }) {
    const {
      valueRef,
      monthsRef,
      prevYear,
      nextYear,
      onSelect
    } = useCalendar(props);
    const visible = ref(false);

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

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

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

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

        for (let j = 0; j < 4; j++) {
          var _props$disabledDate;

          const passed = i * 4 + j;
          const month = monthsRef.value[passed];
          const disabled = (_props$disabledDate = props.disabledDate) === null || _props$disabledDate === void 0 ? void 0 : _props$disabledDate.call(props, month);
          const selected = month.isSame(value, 'month');
          const isNextGroup = month.year() > value.year();
          const cls = {
            [`${prefixCls}_cell`]: true,
            [`${prefixCls}_cell-disabled`]: disabled,
            [`${prefixCls}_cell-selected`]: selected,
            [`${prefixCls}_cell-next`]: isNextGroup,
            [`${prefixCls}_cell-this`]: month.isSame(Date.now(), 'month')
          };
          tds[j] = _createVNode("td", {
            "key": passed,
            "class": cls,
            "role": "gridcell",
            "onClick": disabled || onSelect.bind(null, month)
          }, [_createVNode("div", {
            "class": `${prefixCls}_cell_text`,
            "aria-selected": selected,
            "aria-disabled": disabled
          }, [monthsShort[month.month()]])]);
        }

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

      return _createVNode("div", {
        "class": prefixCls
      }, [_createVNode(CalendarHeader, {
        "prefixCls": prefixCls,
        "title": valueRef.value.format('YYYY年'),
        "onPrev": prevYear,
        "onNext": nextYear,
        "onPanelChange": showMonthPanel
      }, null), _createVNode("table", {
        "class": `${prefixCls}_table`,
        "cellspacing": "2"
      }, [_createVNode("tbody", null, [trs])]), _createVNode(Transition, {
        "name": "calendar-ain"
      }, {
        default: () => [visible.value ? _createVNode(YearCalendar, {
          "value": value,
          "style": 'position: absolute; top:0; left:0;',
          "onSelect": onSelectYear
        }, null) : null]
      })]);
    };
  }

});