import React from 'react';
import { Text, Icon, Flex, Button } from 'native-base';
import Unicons from '../Unicons';
import { Pressable } from 'react-native';

interface InfoItemProps {
    variant: 'button' | 'info';
    borderType?: "10" | "00" | "01";
    type: "location" | "card" | "datetime";
    text1?: string;
    text2?: string;
    buttonText?: string;
}

export default function (props: InfoItemProps) {
    let { borderTopRadius, borderBottomRadius } = getBorderRadiuses(props);
    let { bgColor, iconName } = getIconBgColorAndIcon(props);
    let { pt, pb } = getPaddings(props);

    return <Flex
        flexDirection={"row"}
        alignItems={"center"}
        justifyContent="space-between"
        bgColor={props.variant === "info" ? "mini_dark_blue" : "mini_light_gray"}
        borderTopRadius={borderTopRadius}
        borderBottomRadius={borderBottomRadius}
        pl="5"
        pr="5"
        pt={pt}
        pb={pb}
    >
        <Flex
            flexDirection={"row"}
            alignItems={"center"}
        >
            <Flex
                width="10"
                height="10"
                bgColor={bgColor}
                alignItems="center"
                justifyContent={"center"}
                borderRadius="full"
            >
                <Icon as={Unicons} name={iconName} size="md" color={"white"} />
            </Flex>
            <Flex ml="4" maxHeight={"100%"} justifyContent={"center"}>
                <Text
                    isTruncated
                    maxW={"40"}
                    fontSize={props.variant === "button" ? "sm" : "md"}
                    color={props.variant === "button" ? "mini_text_gray" : (props.type === "datetime" ? "mini_cyan" : "white")}
                >
                    {props.text1 || "{{text1}}"}
                </Text>
                <Text
                    isTruncated
                    maxW={"32"}
                    fontSize={props.variant === "button" ? "md" : "sm"}
                    color={props.variant === "button" ? "white" : "mini_text_gray"}
                >
                    {props.text1 || "{{text2}}"}
                </Text>
            </Flex>
        </Flex>
        {props.variant === "button" &&
            <Flex>
                <Pressable>
                    <Text isTruncated maxW={"32"} fontSize="sm" color="mini_blue" >
                        {props.buttonText || "{{buttonText}}"}
                    </Text>
                </Pressable>
            </Flex>
        }
    </Flex>
}

function getPaddings(props: InfoItemProps) {
    let pt = "4";
    let pb = "4";

    if (props.borderType === "10") {
        pt = "4"
        pb = "2"
    }

    if (props.borderType === "00") {
        pt = "2"
        pb = "2"
    }

    if (props.borderType === "01") {
        pt = "2"
        pb = "4"
    }

    return { pt, pb };
}

function getIconBgColorAndIcon(props: InfoItemProps) {
    switch (props.type) {
        case "datetime":
            return { bgColor: "mini_blue", iconName: "calender" }
        case "location":
            return { bgColor: "mini_violet", iconName: "map-marker" }
        case "card":
            return { bgColor: "mini_cream", iconName: "credit-card" }
        default:
            return { bgColor: "mini_blue", iconName: "calender" };
    }
}

function getBorderRadiuses(props: InfoItemProps) {
    let borderTopRadius = "xl";
    let borderBottomRadius = "xl";

    if (props.borderType === "10") {
        borderBottomRadius = "none";
    }

    if (props.borderType === "00") {
        borderTopRadius = "none";
        borderBottomRadius = "none";
    }

    if (props.borderType === "01") {
        borderTopRadius = "none";
    }
    return { borderTopRadius, borderBottomRadius };
}