import { Text } from "@flip.id/ui-kit";
import ArrowTooltip from "../../../icons/function/ArrowTooltip";
import { Center, VStack, Box, Flex, IconButton } from "native-base";
import React from "react";
import type { AccessibilityProps } from "react-native";
import Close from "../../../icons/function/Close";
import ArrowTooltipDown from "../../../icons/function/ArrowTooltipDown";
import type { IFlipColors } from "../../../config/interfaces/IFlipColors";
import type { IColors } from "native-base/lib/typescript/theme/base/colors";
import EnhancedTouchableOpacity from "../EnhancedTouchableOpacity";

export interface ITooltip {
  title?: string;
  label: string;
  onPressClose?: () => void;
  arrowPosition: "top" | "bottom" | "top-left" | "bottom-left";
  onPressButton?: () => void;
  color: IFlipColors | IColors;
  isClosableButton?: boolean;
  isClosableClick?: boolean;
  as?: React.ComponentType<any>;
  closeButtonSize?: number | string;
  closeButtonAccessibilityLabel?: string;
}

export const Tooltip: React.FC<ITooltip & AccessibilityProps> = (props) => {
  const {
    onPressClose,
    arrowPosition,
    onPressButton,
    isClosableButton,
    isClosableClick,
    color,
    as,
    closeButtonSize,
    closeButtonAccessibilityLabel,
  } = props;

  const ArrowTop = () => {
    switch (arrowPosition) {
      case "top":
        return (
          <Center>
            <ArrowTooltip
              color={color || "flipOrange.plus1"}
              marginBottom="-11px"
            />
          </Center>
        );

      case "top-left":
        return (
          <ArrowTooltip
            color={color || "flipOrange.plus1"}
            marginBottom="-11px"
            marginLeft="5"
          />
        );

      default:
        return null;
    }
  };
  return (
    <VStack>
      <ArrowTop />
      <Box p="2" bg={color || "flipOrange.plus1"} rounded="16">
        <Flex flex={1} flexDirection="row" justifyContent="space-between">
          <Center>
            <Box pl="2" pr="5">
              {props.title && props.title.length > 0 && (
                <Text fontSize="sm" color="neutral.White" bold>
                  {props.title}
                </Text>
              )}
              <Text fontSize="sm" numberOfLines={2} color="neutral.White">
                {props.label}
              </Text>
              {isClosableClick && onPressButton && (
                <Text fontSize="sm" onPress={onPressButton} color="#FFF" pt="2">
                  Click Me!
                </Text>
              )}
            </Box>
          </Center>
          {as && isClosableButton && onPressClose && (
            <EnhancedTouchableOpacity
              as={as}
              top="6px"
              right="-2px"
              onPress={onPressClose}
              accessibilityLabel={
                closeButtonAccessibilityLabel || "Ikon Tutup Tooltip"
              }
            >
              <Close color="#FFF" size={closeButtonSize} />
            </EnhancedTouchableOpacity>
          )}
          {!as && isClosableButton && onPressClose && (
            <IconButton
              position="absolute"
              top="-4px"
              right="-16px"
              onPress={onPressClose}
              accessibilityLabel={
                closeButtonAccessibilityLabel || "Ikon Tutup Tooltip"
              }
            >
              <Close color="#FFF" size={closeButtonSize} />
            </IconButton>
          )}
        </Flex>
      </Box>
      {arrowPosition === "bottom-left" && (
        <ArrowTooltipDown color={color || "flipOrange.plus1"} marginLeft="5" />
      )}
      {arrowPosition === "bottom" && (
        <Center>
          <ArrowTooltipDown color={color || "flipOrange.plus1"} />
        </Center>
      )}
    </VStack>
  );
};

export default Tooltip;