import { type FC, memo, useMemo } from "react";
import { Pressable, View } from "react-native";
import { getStyles } from "./styles";
import { grid } from "../../utils/grid";

const WEEK = [0, 1, 2, 3, 4, 5, 6];

interface IProps {
    item: string;
    index: number;
    onPress?: (value: { day: number, time: string }) => void;
};

interface IGridItem {
    item: number;
    index: number;
    disabled: boolean;
    onPress?: (value: { day: number, time: string }) => void;
};

export const GridRow: FC<IProps> = memo(({ index, onPress }) => {
    const styles = useMemo(() => getStyles(), []);

    return (
        <View style={styles.container}>
            {WEEK.map(item =>
                <GridItem key={item} item={item} disabled={!onPress} index={index} onPress={onPress} />
            )}
        </View>
    );
});

const GridItem: FC<IGridItem> = ({ item, index, disabled, onPress }) => {
    const styles = useMemo(() => getStyles(), []);

    const handleOnPress = () => {
        onPress?.({ day: item, time: grid.hours[index] || '' });
    };

    return (
        <Pressable
            disabled={disabled}
            style={({ pressed }: { pressed: boolean }) => ([styles.cell, { borderBottomWidth: index === 23 ? 1 : 0, backgroundColor: pressed ? grid.colors.primary : undefined }])}
            onPress={handleOnPress}
        />
    );
};