import { Box, Icon, Text, useTheme } from "native-base";
import React from "react";
import Ionicons from '@expo/vector-icons/Ionicons';
import { LinearGradient } from 'expo-linear-gradient';
import colors from '../../themes/main/colors';
import { Pressable } from "react-native";

interface ScheduleItemProps {
    title: string;
    time: string;
    mode: "free" | "disabled" | "selected";
    id?: string;
    itemCount?: number;
    onClick?: (id?: string) => void;
}

function ScheduleItem(props: ScheduleItemProps) {
    const [pressed, setPressed] = React.useState(false);
    const theme = useTheme();

    const defaultHeight = 70;
    const itemCount = props.itemCount || 1;
    const height = defaultHeight * itemCount + (itemCount > 1 ? theme.space[4] : 0);

    const borderColors = {
        "free": [],
        "disabled": [colors.mini_border_gray],
        "selected": [colors.mini_green, colors.mini_cream]
    }

    const iconColors = {
        "free": "mini_blue",
        "disabled": "mini_blue",
        "selected": "mini_green"
    }

    return (
        <LinearGradient
            colors={borderColors[props.mode]}
            locations={[0, 1]}
            start={{ x: 0, y: 0 }}
            end={{ x: 0, y: 1 }}
            style={{
                padding: 1,
                height: height,
                borderRadius: theme.radii.xl,
            }}>
            <Box height={`${height - 2}px`} bgColor={props.mode === "disabled" ? "mini_dark_blue" : "mini_bg_dark_blue"} borderRadius="xl" paddingX="20px" paddingY={"15px"}>
                <Box justifyContent={"space-between"} alignItems="center" display="flex" flexDirection="row">
                    <Box>
                        <Text fontSize={props.mode === "free" ? "xs" : "md"} lineHeight="md" color={props.mode === "free" ? "mini_text_gray" : "mini_white"}>
                            {props.title}
                        </Text>
                        <Text
                            color={props.mode !== "free" ? "mini_text_gray" : "mini_white"}
                            fontSize={props.mode === "free" ? "md" : "xs"}
                            lineHeight={"xs"}
                        >
                            {props.time}
                        </Text>
                    </Box>
                    {props.mode !== "disabled" &&
                        <Box>
                            <Box justifyContent={"center"} alignItems="center" width="40px" height="40px" backgroundColor={iconColors[props.mode]} borderRadius="full">
                                {props.mode !== "free" &&
                                    <Icon as={Ionicons} name={"checkmark-outline"} size="sm" color={"mini_bg_dark_blue"} />
                                }
                                {props.mode === "free" &&
                                    <Pressable
                                        onPress={() => {
                                            props.onClick && props.onClick(props.id);
                                        }}
                                        onPressIn={() => setPressed(true)}
                                        onPressOut={() => setPressed(false)}
                                    >
                                        <Icon opacity={pressed ? "0.5" : "1"} as={Ionicons} name={"add-outline"} size="sm" color={"mini_white"} />
                                    </Pressable>
                                }
                            </Box>
                        </Box>
                    }
                </Box>
            </Box>
        </LinearGradient >
    );
}

export default ScheduleItem;