import React from 'react';
import Box from '../../layout/Box';
import style from './Calendarview.module.css';
import { getMonthEnd } from '../dateTimeFormat';
import BoxConstantProps from '../../layout/Box.constantProps';
import getCompliedClassName from '../../../utils/getCompliedClassName';
import DateboxConstantProps from '../datebox/Datebox.constantProps';

function CalendarviewSkeleton(props) {
  const {
    date,
    year,
    month,
    dataId,
    needBorder,
    dayNames,
    dayNamesShort,
    handleSelect,
    DateBoxComponent,
    customClassName,
    direction
  } = props;
  const userSeeDate = new Date(year, month, 1);
  const userSeeDay = userSeeDate.getDay() + 1;
  const userSeeYear = userSeeDate.getFullYear();
  const userSeeMonth = userSeeDate.getMonth();
  const monthEnd = getMonthEnd(month, year);
  const lastMonth = 11;
  const firstMonth = 0;
  let incremday = 1;
  let incremleti = 1;
  let isToday = false;

  const rows = (() => {
    const rowArr = [];

    for (let j = 1; j <= 6; j++) {
      const dayArr = [];
      let output = null;

      for (let i = 1; i < 8; i++) {
        let tdclass;

        if (i === 1) {
          tdclass += ` ${style.sunday}`;
        }

        if (incremleti >= userSeeDay && incremday <= monthEnd) {
          if (incremday === parseInt(date) && parseInt(month) === userSeeMonth && parseInt(year) === userSeeYear) {
            isToday = true;
          } else {
            isToday = false;
          }

          output = /*#__PURE__*/React.createElement(DateBoxItemRender, {
            i: i,
            isActive: isToday,
            color: isToday ? DateboxConstantProps.color.primary : i === 1 ? DateboxConstantProps.color.danger : DateboxConstantProps.color.dark,
            handleSelect: handleSelect.bind({
              date: userSeeDate,
              month: userSeeMonth,
              year: userSeeYear,
              day: i - 1
            }),
            incremday: incremday,
            userSeeMonth: userSeeMonth,
            userSeeDay: i - 1,
            userSeeYear: userSeeYear,
            dataId: isToday ? `${dataId}_dateSelected` : `${dataId}_date`,
            DateBoxComponent: DateBoxComponent
          });
          incremday++;
        } else if (incremleti < userSeeDay) {
          let prevMonth = userSeeMonth - 1;
          let prevYear = userSeeYear;

          if (userSeeMonth === firstMonth) {
            prevMonth = lastMonth;
            prevYear = userSeeYear - 1;
          }

          const prevMonthEnd = getMonthEnd(prevMonth, prevYear);
          const prevDate = prevMonthEnd - (userSeeDay - 1) + incremleti;
          isToday = prevDate === parseInt(date) && parseInt(month) === prevMonth && parseInt(year) === prevYear ? true : false;
          output = /*#__PURE__*/React.createElement(DateBoxItemRender, {
            i: i,
            isActive: isToday,
            color: i === 1 ? DateboxConstantProps.color.dangerSecondary : DateboxConstantProps.color.secondary,
            handleSelect: handleSelect.bind({
              date: prevDate,
              month: prevMonth,
              year: prevYear,
              day: i - 1
            }),
            incremday: prevDate,
            userSeeDay: i - 1,
            userSeeMonth: prevMonth,
            userSeeYear: prevYear,
            dataId: isToday ? `${dataId}_dateSelected` : `${dataId}_invalidDate`,
            DateBoxComponent: DateBoxComponent
          });
        } else if (incremleti > monthEnd) {
          let nextMonth = userSeeMonth + 1;
          let nextYear = userSeeYear;

          if (userSeeMonth === lastMonth) {
            nextMonth = firstMonth;
            nextYear = userSeeYear + 1;
          }

          const nextDate = incremleti - (userSeeDay - 1) - monthEnd;
          isToday = nextDate === parseInt(date) && parseInt(month) === nextMonth && parseInt(year) === nextYear ? true : false;
          output = /*#__PURE__*/React.createElement(DateBoxItemRender, {
            i: i,
            isActive: isToday,
            DateBoxComponent: DateBoxComponent,
            color: i === 1 ? DateboxConstantProps.color.dangerSecondary : DateboxConstantProps.color.secondary,
            handleSelect: handleSelect.bind({
              date: nextDate,
              month: nextMonth,
              year: nextYear,
              day: i - 1
            }),
            incremday: nextDate,
            userSeeDay: i - 1,
            userSeeMonth: nextMonth,
            userSeeYear: nextYear,
            dataId: isToday ? `${dataId}_dateSelected` : `${dataId}_invalidDate`
          });
        } else {
          output = /*#__PURE__*/React.createElement(Box, {
            key: i,
            customClassName: {
              cover: style.grid
            }
          });
        }

        incremleti++;
        dayArr.push(output);
      }
      /* eslint-disable react/forbid-component-props */


      rowArr.push( /*#__PURE__*/React.createElement(Box, {
        key: `row-${j}`,
        direction: direction,
        align: BoxConstantProps.align.both,
        justifyContent: BoxConstantProps.justifyContent.between,
        isCover: false,
        isContainer: true,
        customClassName: {
          cover: style.dateRow
        }
      }, dayArr));
    }

    return rowArr;
  })();

  let dayAlign = () => {
    return dayNames.map((day, i) => {
      let dayAlignClass = getCompliedClassName(customClassName, {
        [style.daysStr]: !!true,
        [style.grid]: !!true,
        [style.sunday]: !!(i == 0)
      }, {
        [customClassName.dayNames]: customClassName.dayNames
      });
      return /*#__PURE__*/React.createElement("div", {
        className: dayAlignClass,
        "data-title": dayNames[i],
        key: i
      }, dayNamesShort[i]);
    });
  };

  return /*#__PURE__*/React.createElement(Box, {
    isContainer: true,
    direction: direction == 'dir_col' ? 'dir_row' : 'dir_col'
  }, /*#__PURE__*/React.createElement(Box, {
    direction: direction,
    align: BoxConstantProps.align.both,
    customClassName: {
      cover: style.days
    },
    isContainer: true
  }, dayAlign()), /*#__PURE__*/React.createElement(Box, {
    "data-id": `${dataId}_dateContainer`,
    className: `${style.dateContainer} ${needBorder ? style.separator : ''}`,
    direction: direction == 'dir_col' ? 'dir_row' : 'dir_col',
    isContainer: true
  }, rows));
}

export function DateBoxItemRender(props) {
  let {
    DateBoxComponent
  } = props;
  let basicprops = { ...props,
    ...DateBoxComponent.compProps
  };
  return DateBoxComponent.renderComp(basicprops);
}
export default CalendarviewSkeleton;