import React from 'react';
import Year from '../year/Year';
import Month from '../month/Month';
import Box from '../../layout/Box';
/**** CSS ****/

import style from './Yearview.module.css';
import getCompliedClassName from '../../../utils/getCompliedClassName';
/**** Methods ****/

function YearviewSkeleton(props) {
  const {
    years = []
  } = props;
  return years.map((year, i) => {
    let {
      viewedYear,
      viewedMonth,
      monthNames,
      monthNamesShort,
      monthNamesData,
      isMonthOpen,
      localYear,
      handleYearClick,
      handleMonthClick,
      direction,
      wrap,
      align,
      justifyContent,
      customClassName
    } = props;
    let yearViewClass = getCompliedClassName(customClassName, {
      [style.yearBox]: !!true
    }, {
      [customClassName.base]: !!customClassName.base
    });
    let baseClass = getCompliedClassName(customClassName, {
      [style.yearContainer]: true,
      [style.toggleYear]: !!(viewedYear !== localYear && viewedYear === year)
    }, {
      [customClassName.monthList]: !!customClassName.monthList
    });
    viewedYear = parseInt(viewedYear) || 0;
    localYear = parseInt(localYear) || 0;
    return /*#__PURE__*/React.createElement("div", {
      className: yearViewClass,
      key: `div- ${i}`
    }, /*#__PURE__*/React.createElement(Year, {
      year: year,
      onClick: handleYearClick,
      isActive: viewedYear === year,
      isOpen: isMonthOpen
    }), viewedYear === year && isMonthOpen ? /*#__PURE__*/React.createElement(Box, {
      direction: direction,
      wrap: wrap,
      align: align,
      justifyContent: justifyContent,
      isContainer: true,
      customClassName: {
        base: baseClass
      }
    }, monthNamesData.map((month, index) => {
      const monthIndex = monthNamesData.indexOf(month);
      return /*#__PURE__*/React.createElement(Month, {
        key: month,
        month: month,
        onClick: handleMonthClick,
        isActive: monthIndex == viewedMonth,
        displayText: monthNamesShort[index],
        monthNamesData: monthNamesData
      });
    })) : null);
  });
}

export default YearviewSkeleton;