import React, { useCallback } from "react";
import Close from "../../../icons/navigation/Close";
import { Box, Text, IconButton, Toast } from "native-base";
import {
  AccessibilityProps,
  Dimensions,
  Platform,
  StyleProp,
  ViewStyle,
} from "react-native";
import { EnhancedTouchableOpacity } from "../EnhancedTouchableOpacity";

export interface ISnackbar {
  id: number | string;
  title?: React.ReactNode | string;
  buttonTitle?: string;
  flexDirection?: "row" | "column";
  onPress?: () => void;
  as?: React.ComponentType<any>;
  showButton?: boolean;
  style?: StyleProp<ViewStyle>;
}

const KEY = "SNACKBAR";

export const ACCESSIBILITY = {
  BUTTON_TITLE: `${KEY}-BUTTON-TITLE`,
  TEXT: `${KEY}-TEXT`,
  VIEW: `${KEY}-VIEW`,
  BUTTON_CLOSE: `${KEY}-BUTTON-CLOSE`,
  BUTTON_TEXT: `${KEY}-BUTTON-TEXT`,
};

export const TEST_ID = {
  TEXT: `id.flip.staging:id/${KEY}-TEXT`,
};

export const Snackbar: React.FC<ISnackbar & AccessibilityProps> = (props) => {
  const {
    id,
    title,
    buttonTitle,
    onPress,
    flexDirection,
    as,
    showButton = true,
    style,
  } = props;

  const onClose = useCallback(() => {
    Toast.close(id);
  }, [id]);

  return (
    <Box
      bg="neutral.MainText"
      display="flex"
      flexDirection={flexDirection ?? "row"}
      alignItems="flex-start"
      accessibilityLabel={ACCESSIBILITY.VIEW}
      p="4"
      rounded="16px"
      {...(Platform.OS !== "web" && {
        w: Dimensions.get("window").width - 32,
      })}
      style={style}
    >
      <Box flex={1}>
        <Text testID={TEST_ID.TEXT} color="white" fontSize="sm">
          {title}
        </Text>
      </Box>
      {showButton ? (
        buttonTitle ? (
          <Box mt={flexDirection === "column" ? "2" : "0"}>
            <EnhancedTouchableOpacity
              as={as}
              onPress={onPress ? onPress : onClose}
              accessibilityLabel={ACCESSIBILITY.BUTTON_TITLE}
            >
              <Text
                fontWeight="bold"
                fontSize="sm"
                accessibilityLabel={ACCESSIBILITY.BUTTON_TEXT}
                color="flipOrange.Minus1"
              >
                {buttonTitle}
              </Text>
            </EnhancedTouchableOpacity>
          </Box>
        ) : (
          <IconButton
            onPress={onClose}
            accessibilityLabel={ACCESSIBILITY.BUTTON_CLOSE}
            ml="2"
            p="0"
            variant="clean"
            icon={<Close size="6" color="neutral.SecondaryText" />}
          />
        )
      ) : null}
    </Box>
  );
};

export default Snackbar;