import React, { useEffect, useState } from 'react';
import useCalendar from '@veccu/react-calendar';
import { format } from 'date-fns';
import locale from 'date-fns/locale/en-US';
import { ChevronLeft, ChevronRight, DotMark } from '@carbon/icons-react';
import Button from '../../atoms/Button';
import Block from '../../atoms/Block';
import style from '../../../style/';
export interface CalendarProps {
    /**
     * Value prop that can receive a Date.
     */
    value?: Date;
    /**
     * onChange event that will return a Date.
     */
    onChange?: (e: Date | undefined) => void;
    /**
     * Used to calculate the maximum month to render.
     */
    maxDate?: Date;
    /**
     * Used to calculate the minimum month to render.
     */
    minDate?: Date;
    /**
     * Calendar variation that will switch between styles.
     */
    variation?: 'default' | 'primary' | 'secondary';
}

const Calendar: React.FC<CalendarProps> = (props) => {
    // TODO: Add min and max date to the calendar
    const { value, onChange, variation } = props;
    const { cursorDate, headers, body, navigation } = useCalendar();

    const [selectedDate, setSelectedDate] = useState(value);

    useEffect(() => {
        selectedDate && navigation.setDate(selectedDate);
        onChange && onChange(selectedDate);
    }, [selectedDate]);

    useEffect(() => {
        value && navigation.setDate(value);
        setSelectedDate(value);
    }, [value]);

    const isSelectedDate = (date: Date) => {
        return date?.getTime() === selectedDate?.getTime();
    };

    const getVariation = () => {
        switch (variation) {
            case 'default':
                return style.calendar.init;
            case 'primary':
                return style.calendar.primary;
            case 'secondary':
                return style.calendar.secondary;
            default:
                return style.calendar.init;
        }
    };

    const variationStyle = getVariation();

    return (
        <Block className={variationStyle.root}>
            <div className="flex items-start justify-between pb-5">
                <div className="flex-auto px-2 font-sans text-xl antialiased font-semibold text-left select-none">
                    {format(cursorDate, 'LLLL, yyyy', { locale })}
                </div>
                <Button className="p-1" onClick={navigation.toPrev}>
                    <ChevronLeft size={16} />
                </Button>
                <Button className="p-1" onClick={navigation.setToday}>
                    <DotMark size={16} />
                </Button>
                <Button className="p-1" onClick={navigation.toNext}>
                    <ChevronRight size={16} />
                </Button>
            </div>
            <div className="grid grid-cols-7 gap-0 pb-3 select-none">
                {headers.weekDays.map(({ key, value }) => {
                    return (
                        <div className="font-sans antialiased leading-loose text-center text-inherit" key={key}>
                            {format(value, 'E', { locale })}
                        </div>
                    );
                })}
            </div>
            <div className="grid grid-cols-7 gap-0 select-none">
                {body.value.map((week) => {
                    const { value: days } = week;
                    return days.map((day) => {
                        const { key, date, isCurrentDate, isCurrentMonth, value } = day;
                        return (
                            <Button
                                key={key}
                                onClick={() => setSelectedDate(value)}
                                className={`p-1 relative justify-center rounded-sm
                ${isCurrentMonth ? ' opacity-100 ' : ' opacity-30 '}
                ${isCurrentDate ? variationStyle.current : ''}
                ${variationStyle.button}
                ${isSelectedDate(value) ? variationStyle.selected : ' '} 
                `}
                            >
                                {date}
                            </Button>
                        );
                    });
                })}
            </div>
        </Block>
    );
};

Calendar.defaultProps = {
    variation: 'default',
};

Calendar.displayName = 'Calendar';

export default Calendar;
