import { memo, useMemo } from 'react';
import { getStyles } from './styles';
import { Text, View } from 'react-native';
import { grid } from '../../utils/grid';
import { divideDate } from '../../utils/divideDate';
import type { RenderHeader } from "react-native-week-schedule-1";

export const Header: RenderHeader = memo(({ dates, weekDays }) => {
    const styles = useMemo(() => getStyles(), []);
    const today = new Date().toISOString();

    const getColor = (date?: string) => {
        if (date && today.includes(date.split(':')[0] || '')) {
            return grid.colors.primary;
        }
        return undefined;
    };

    const getTextColor = (date?: string) => {
        if (date && today.includes(date.split(':')[0] || '')) {
            return grid.colors.text_inverted;
        };
        return grid.colors.text;
    };

    const renderItem = (item: string, index: number) => (
        <View key={item} style={styles.gridItem}>
            <View style={styles.textWrapper}>
                <Text style={styles.dayText} >{item.slice(0, 3)} </Text>
                {dates && <Text style={[styles.dateText, { color: getTextColor(dates?.[index]), backgroundColor: getColor(dates?.[index]) }]} >{divideDate(dates?.[index])[2]}</Text>}
            </View>
        </View>
    );

    return (
        <View style={styles.container}>{weekDays.map?.(renderItem)}</View>
    );
});