nice-app-web/src/shared/ui/calendar/nice-calendar.tsx

import moment, { locale } from 'moment';
import styled from "styled-components";
import { useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';
import { useEffect } from 'react';
import { CalendarType } from '@/entities/common/model/types';

interface NiceCalendarProps {
  calendarOpen: boolean;
  setCalendarOpen: (calendarOpen: boolean) => void;
  startDate?: string;
  endDate?: string;
  singleDate?: string;
  calendarType: CalendarType;
  setNewDate: (date: string) => void;
  minDate?: Date;
  maxDate?: Date;
};

const NiceCalendar = ({
  calendarOpen,
  setCalendarOpen,
  startDate,
  endDate,
  singleDate,
  calendarType,
  setNewDate,
  minDate: propMinDate,
  maxDate: propMaxDate
}: NiceCalendarProps) => {
  const [valueDate, setValueDate] = useState<Date | undefined>();
  const [minDate, setMinDate] = useState<Date | undefined>();
  const [maxDate, setMaxDate] = useState<Date | undefined>();
  const onchangeToDate = (selectedDate: any) => {
    setNewDate(moment(selectedDate).format('YYYY.MM.DD'));
    setCalendarOpen(false);
  };
    
  const onClickToClose = () => {
    // setCalendarOpen(false);
  };
  const setMinMaxValueDate = () => {
    if(calendarType === CalendarType.Start){
      setMinDate(propMinDate || undefined);
      if(!!endDate){
        setMaxDate(moment(endDate, 'YYYY.MM.DD').toDate());
      }
      setValueDate(startDate ? moment(startDate, 'YYYY.MM.DD').toDate() : undefined);
    }
    else if(calendarType === CalendarType.End){
      if(!!startDate){
        setMinDate(moment(startDate, 'YYYY.MM.DD').toDate());
      }
      setMaxDate(propMaxDate || new Date());
      setValueDate(endDate ? moment(endDate, 'YYYY.MM.DD').toDate() : undefined);
    }
    else if(calendarType === CalendarType.Single){
      setMinDate(propMinDate || undefined);
      setMaxDate(propMaxDate || undefined);
      setValueDate(singleDate ? moment(singleDate, 'YYYY.MM.DD').toDate() : undefined);
    }
  };
  
  const formatMonthYear = (locale: string | undefined, date: Date) => {
    return date.toLocaleDateString('en', { 
      month: 'long',
      year: 'numeric'
    });
  };
  const formatYear = (locale: string | undefined, date: Date) => {
    return date.toLocaleDateString('en', { 
      year: 'numeric'
    });
  };
  const formmatMonth = (locale: string | undefined, date: Date) => {
    return date.toLocaleDateString('en', { 
      month: 'short'
    });
  };
  const formatDay = (locale: string | undefined, date: Date) => {
    return date.toLocaleString('en', { 
      day: 'numeric'
    });
  };
  const formatShortWeekday = (locale: string | undefined, date: Date) => {
    return date.toLocaleString('en', { 
      weekday: 'short'
    });
  };

  useEffect(() => {
    setMinMaxValueDate();
    
  }, [calendarOpen])

  return (
    <>
      { (calendarOpen) && 
        <>
        <div className="bg-dim"></div>
        <CalendarWrapper onClick={ () => onClickToClose() }>
          <Calendar
            minDate={ minDate }
            maxDate={ maxDate }
            onChange={ onchangeToDate }
            value={ valueDate }
            formatMonthYear={ formatMonthYear }
            formatYear= { formatYear }
            formatMonth={ formmatMonth }
            formatDay={ formatDay }
            formatShortWeekday={ formatShortWeekday }
            showNeighboringMonth={ true }
          ></Calendar>
        </CalendarWrapper>
        </>
      }
    </>
  );
};
const CalendarWrapper = styled.div`
  z-index: 1100;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
`;

export default NiceCalendar;