import React from 'react';
import Calendarview from '../calendarview/Calendarview';
import Yearview from '../yearview/Yearview';
import Box from '../../layout/Box';
import style from './Datepicker.module.css';
import getCompliedClassName from '../../../utils/getCompliedClassName'; // import TimeView from "../timeview/TimeView-Behaviour";
// import Buttongroup from "../../buttongroup/Buttongroup-Behaviour";
// import { DateTimeWidgetPropTypes } from '../../Components.manifest';
// import DropBox from '../../dropbox/DropBox-Behaviour';
// import Popup from '../../popup/Popup';
// import ButtongroupImplementation from '../../buttongroup/Buttongroup-Skeleton';
// import TimeViewImplementation from '../timeview/TimeView-Skeleton';
//import CalenderViewImplementation from '../calenderview/CalenderView-Skeleton';
// import DropBoxImplementation from '../../dropbox/DropBox-Skeleton';
// import YearViewImplementation from '../yearview/YearView-Skeleton';

function DatepickerSkeleton(props) {
  let {
    monthNames,
    monthNamesShort,
    dayNames,
    dayNamesShort,
    month,
    date,
    year,
    onSelectDate,
    selectYear,
    selectMonth,
    isTimeView,
    hour,
    minute,
    noon,
    onClose,
    setHours,
    setMinutes,
    setNoon,
    onPrev,
    onNext,
    onSubmit,
    removeClose,
    popupGroup,
    customClassName
  } = props;
  let calendarClass = getCompliedClassName(customClassName, {
    [style.calender]: true
  }, {
    [customClassName.calendar]: !!customClassName.calendar
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DateHeaderWidget, {
    selectYear: selectYear,
    year: year,
    month: month,
    selectMonth: selectMonth,
    monthNames: monthNames,
    monthNamesShort: monthNamesShort,
    onPrev: onPrev,
    onNext: onNext,
    customClassName: customClassName.dateHeader
  }), /*#__PURE__*/React.createElement("div", {
    className: calendarClass
  }, /*#__PURE__*/React.createElement(Calendarview, {
    month: month,
    date: date,
    year: year,
    onSelect: onSelectDate,
    dayNames: dayNames,
    dayNamesShort: dayNamesShort,
    customClassName: customClassName.calenderview
  })));
}

function DateHeader(props) {
  let [isYearView, setYearView] = React.useState(false);
  let {
    onPrev,
    onNext,
    selectYear,
    selectMonth,
    monthNames,
    monthNamesShort,
    //        removeClose,
    month,
    year,
    customClassName // togglePopup,
    // popupGroup,
    // isPopupOpen

  } = props;
  let headerClass = getCompliedClassName(customClassName, {
    [style.header]: !!true
  }, {
    [customClassName.header]: !!customClassName.header
  }),
      titleClass = getCompliedClassName(customClassName, {
    [style.head]: !!true
  }, {
    [customClassName.title]: !!customClassName.title
  }),
      dropClass = getCompliedClassName(customClassName, {
    [style.dropbox]: !!true
  }, {
    [customClassName.dropdown]: !!customClassName.dropdown
  }),
      navClass = getCompliedClassName(customClassName, {
    [style.navigation]: !!true
  }, {
    [customClassName.navigation]: !!customClassName.navigation
  });
  return /*#__PURE__*/React.createElement("div", {
    className: headerClass
  }, /*#__PURE__*/React.createElement("div", {
    className: titleClass,
    onClick: () => setYearView(!isYearView)
  }, `${monthNames[month]}- ${year}`), isYearView ?
  /*#__PURE__*/
  //<DropBox renderComponent={DropBoxImplementation} isActive={isPopupOpen} onClick={removeClose} popupGroup={popupGroup} >
  React.createElement("div", {
    className: dropClass
  }, /*#__PURE__*/React.createElement(Yearview, {
    viewedYear: year,
    viewedMonth: month,
    onSelectYear: selectYear,
    onSelectMonth: selectMonth,
    monthNames: monthNames,
    monthNamesShort: monthNamesShort,
    isMonthOpen: true
  })) : null //</DropBox>:null
  , /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
    className: navClass,
    onClick: onPrev
  }, '<'), /*#__PURE__*/React.createElement("span", {
    className: navClass,
    onClick: onNext
  }, '>')));
}

export var DateHeaderWidget = DateHeader; //Popup(DateHeader)

export default DatepickerSkeleton;