import clsx from 'clsx';
import { format } from 'date-fns';
import React, { useState } from 'react';
import { Calendar as ReactCalendar } from 'react-calendar';
import { FiChevronLeft, FiChevronRight } from 'react-icons/fi';
import styles from './index.module.scss';

interface CalendarProps {
  onDateSelect?: (date: Date) => void;
  selectedDate?: Date;
  minDate?: Date;
  maxDate?: Date;
  className?: string;
}

const Calendar: React.FC<CalendarProps> = ({
  onDateSelect,
  selectedDate,
  minDate,
  maxDate,
  className,
}) => {
  const [date, setDate] = useState<Date>(selectedDate || new Date());

  const handleDateChange = (newDate: Date) => {
    setDate(newDate);
    onDateSelect?.(newDate);
  };

  return (
    <div className={clsx(styles.calendarWrapper, className)}>
      <ReactCalendar
        // @ts-ignore
        onChange={handleDateChange}
        value={date}
        minDate={minDate}
        maxDate={maxDate}
        formatMonthYear={(locale, date) => format(date, 'MMMM yyyy')}
        next2Label={null}
        prev2Label={null}
        nextLabel={<FiChevronRight />}
        prevLabel={<FiChevronLeft />}
        className={styles.calendar}
        tileClassName={({ date: tileDate }) =>
          clsx(styles.tile, {
            [styles.selected]:
              format(tileDate, 'yyyy-MM-dd') === format(date, 'yyyy-MM-dd'),
            [styles.today]:
              format(tileDate, 'yyyy-MM-dd') ===
              format(new Date(), 'yyyy-MM-dd'),
          })
        }
      />
    </div>
  );
};

export default Calendar;