import { memo, useCallback, useMemo } from "react";
import { getStyles } from "./styles";
import { View } from "react-native";
import { GridRow } from "../gridRow";
import type { RenderGrid } from "react-native-week-schedule-1";
import { getTime } from "../../utils/getTime";

export const Grid: RenderGrid = memo(({ hours, dates, onSlotPress }) => {
    const styles = useMemo(() => getStyles(), []);

    const handleOnSlotPress = useMemo(() => (!onSlotPress
        ? undefined
        : (value: { day: number, time: string }) => { 
            onSlotPress({ ...value, date: dates ? `${dates[value.day]?.split('T')[0]}T${getTime(value.time)}:00:00.604Z` : undefined });
        }
    ), [dates, onSlotPress]);

    const renderItem = useCallback((item: string, index: number) => (
        <GridRow key={item} item={item} index={index} onPress={handleOnSlotPress} />
    ), [handleOnSlotPress]);

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