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;
  calendarType: CalendarType;
  setNewDate: (date: string) => void;
};

const NiceCalendar = ({
  calendarOpen,
  setCalendarOpen,
  startDate,
  endDate,
  calendarType,
  setNewDate
}: NiceCalendarProps) => {
  const [valueDate, setValueDate] = useState<string>();
  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(undefined);
      setMaxDate(new Date(endDate));
      setValueDate(startDate);
    }            
    else if(calendarType === CalendarType.End){
      setMinDate(new Date(startDate));
      setMaxDate(new Date());
      setValueDate(endDate);
    }
  };
  
  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;