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

  setup(props, {
    emit
  }) {
    const {
      valueRef,
      yearsRef,
      goYear,
      onSelect
    } = useCalendar(props);

    function showMonthPanel() {
      emit('panelChange');
    }

    return () => {
      const {
        prefixCls
      } = props;
      const value = valueRef.value;
      const year1 = value.clone().add(-value.year() % 10, 'years');
      const year2 = year1.clone().add(9, 'years');
      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 year = yearsRef.value[passed];
          const disabled = (_props$disabledDate = props.disabledDate) === null || _props$disabledDate === void 0 ? void 0 : _props$disabledDate.call(props, year);
          const selected = year.isSame(value, 'month');
          const isPrevGroup = year.year() < year1.year();
          const isNextGroup = year.year() > year2.year();
          const cls = {
            [`${prefixCls}_cell`]: true,
            [`${prefixCls}_cell-disabled`]: disabled,
            [`${prefixCls}_cell-selected`]: selected,
            [`${prefixCls}_cell-prev`]: isPrevGroup,
            [`${prefixCls}_cell-next`]: isNextGroup,
            [`${prefixCls}_cell-this`]: year.isSame(Date.now(), 'month')
          };
          tds[j] = _createVNode("td", {
            "key": passed,
            "class": cls,
            "role": "gridcell",
            "onClick": disabled || (onSelect === null || onSelect === void 0 ? void 0 : onSelect.bind(null, year))
          }, [_createVNode("div", {
            "class": `${prefixCls}_cell_text`,
            "aria-selected": selected,
            "aria-disabled": disabled
          }, [year.year()])]);
        }

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

      return _createVNode("div", {
        "class": prefixCls
      }, [_createVNode(CalendarHeader, {
        "prefixCls": prefixCls,
        "title": `${year1.format('YYYY')} - ${year2.format('YYYY')}`,
        "onPrev": goYear.bind(null, -10),
        "onNext": goYear.bind(null, 10),
        "onPanelChange": showMonthPanel
      }, null), _createVNode("table", {
        "class": `${prefixCls}_table`,
        "cellspacing": "2"
      }, [_createVNode("tbody", null, [trs])])]);
    };
  }

});