nice-app-web/src/shared/ui/calendar/nice-calendar-month.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';
import { useTranslation } from 'react-i18next';

interface NiceCalendarProps {
  calendarOpen: boolean;
  setCalendarOpen: (calendarOpen: boolean) => void;
  startMonth?: string;
  endMonth?: string;
  singleMonth?: string;
  calendarType: CalendarType;
  setNewMonth: (month: string) => void;
};

const NiceCalendarMonth = ({
  calendarOpen,
  setCalendarOpen,
  startMonth,
  endMonth,
  singleMonth,
  calendarType,
  setNewMonth
}: NiceCalendarProps) => {
  const { i18n } = useTranslation();
  const currentLocale = i18n.language || 'en';

  const [valueYear, setValueYear] = useState<string>();
  const [minMonth, setMinMonth] = useState<Date | undefined>();
  const [maxMonth, setMaxMonth] = useState<Date | undefined>();
  const onChangeToMonth = (selectedMonth: any) => {
    setNewMonth(moment(selectedMonth).format('YYYY.MM'));
    setCalendarOpen(false);
  };
    
  const onClickToClose = () => {
    // setCalendarOpen(false);
  };
  const setMinMaxValueDate = () => {
    if(calendarType === CalendarType.Start){
      setMinMonth(undefined);
      if(!!endMonth){
        setMaxMonth(new Date(endMonth));
      }
      setValueYear(startMonth?.substring(0, 4));
    }            
    else if(calendarType === CalendarType.End){
      if(!!startMonth){
        setMinMonth(new Date(startMonth));
      }
      setMaxMonth(new Date());
      setValueYear(endMonth?.substring(0, 4));
    }
    else if(calendarType === CalendarType.Single){
      setValueYear(singleMonth?.substring(0,4));
    }
  };
  
  const formatMonthYear = (locale: string | undefined, date: Date) => {
    return date.toLocaleDateString(currentLocale, {
      month: 'long',
      year: 'numeric'
    });
  };
  const formatYear = (locale: string | undefined, date: Date) => {
    return date.toLocaleDateString(currentLocale, {
      year: 'numeric'
    });
  };
  const formmatMonth = (locale: string | undefined, date: Date) => {
    return date.toLocaleDateString(currentLocale, {
      month: 'short'
    });
  };
  const formatDay = (locale: string | undefined, date: Date) => {
    // For Korean locale, return only the day number without '일'
    if (currentLocale === 'ko') {
      return date.getDate().toString();
    }
    return date.toLocaleString(currentLocale, {
      day: 'numeric'
    });
  };
  const formatShortWeekday = (locale: string | undefined, date: Date) => {
    return date.toLocaleString(currentLocale, {
      weekday: 'short'
    });
  };

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

  return (
    <>
      { (calendarOpen) && 
        <>
        <div className="bg-dim"></div>
        <CalendarWrapper onClick={ () => onClickToClose() }>
          <Calendar
            locale={currentLocale}
            minDate={ minMonth }
            maxDate={ maxMonth }
            onClickMonth={ onChangeToMonth }
            value={ valueYear }
            formatMonthYear={ formatMonthYear }
            formatYear= { formatYear }
            formatMonth={ formmatMonth }
            formatDay={ formatDay }
            formatShortWeekday={ formatShortWeekday }
            showNeighboringMonth={ true }
            defaultView='year'
            view='year'
          ></Calendar>
        </CalendarWrapper>
        </>
      }
    </>
  );
};
const CalendarWrapper = styled.div`
  z-index: 1100;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
`;

export default NiceCalendarMonth;