import React from 'react';
import { List, ListItem, ListItemText } from '@mui/material';
import { isSameDay } from 'date-fns';
import { DefinedRange, DateRange } from './types';

type DefinedRangesProps = {
    setRange: (range: DateRange) => void;
    selectedRange: DateRange;
    ranges: DefinedRange[];
    validateRange: (range: DefinedRange) => boolean;
};

const isSameRange = (first: DateRange, second: DateRange) => {
    const { startDate: fStart, endDate: fEnd } = first;
    const { startDate: sStart, endDate: sEnd } = second;
    
    if (fStart && sStart && fEnd && sEnd) {
        return isSameDay(fStart, sStart) && isSameDay(fEnd, sEnd);
    }
    return false;
};

export const DefinedRanges: React.FunctionComponent<DefinedRangesProps> = ({ ranges, setRange, selectedRange, validateRange }: DefinedRangesProps) => (
    <List>
        {
            ranges.map((range, idx) => (
                <ListItem button key={idx} onClick={() => setRange(range)} disabled={validateRange(range)}>
                    <ListItemText
                        primaryTypographyProps={{
                            variant: 'body2',
                            style: {
                                fontWeight: isSameRange(range, selectedRange)
                                    ? 'bold'
                                    : 'normal',
                            },
                        }}
                    >
                        {range.label}
                    </ListItemText>
                </ListItem>
            ))
        }
    </List>
)