import type { PropsWithChildren, ReactElement } from "react";
import React, { useState } from "react";
import type { GestureResponderEvent } from "react-native";
import { Pressable, Text as RNText, View } from "react-native";
import type { IconNames } from "@jobber/design";
import type { BannerProps, BannerTypes } from "./types";
import { useStyles } from "./Banner.style";
import { BannerIcon } from "./components/BannerIcon/BannerIcon";
import { Text } from "../Text";
import { TextList } from "../TextList";
import { ActionLabel } from "../ActionLabel";
import { Typography } from "../Typography";
import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
import { Icon } from "../Icon";

export function Banner({
  action,
  details,
  dismissAccessibilityLabel,
  dismissible = false,
  text,
  type,
  children,
  icon,
  onDismiss,
}: BannerProps) {
  const bannerIcon = icon || getBannerIcon(type);
  const [isVisible, setIsVisible] = useState(true);
  const { t } = useAtlantisI18n();

  const shouldFlow =
    Boolean(React.Children.count(children) === 1 && !text && !details) ||
    Boolean(text && !details && !children);

  const styles = useStyles();

  if (!isVisible) return null;

  const handleDismiss = (event?: GestureResponderEvent) => {
    event?.stopPropagation();
    setIsVisible(false);
    onDismiss?.();
  };

  const bannerContent = (
    <>
      {bannerIcon && <BannerIcon icon={bannerIcon} type={type} />}
      <View style={styles.contentContainer}>
        <View style={styles.childrenContainer}>
          <WrappingElement shouldFlow={shouldFlow} styles={styles}>
            <BannerChildren>{children}</BannerChildren>

            {text && <Text level="text">{text}</Text>}

            {details && <TextList items={details} level="text" />}

            {action && (
              <RNText>
                {shouldFlow && <Typography color="subdued"> | </Typography>}
                <ActionLabel align="start">{action.label}</ActionLabel>
              </RNText>
            )}
          </WrappingElement>
        </View>
      </View>
    </>
  );

  const renderBannerMainContent = () => {
    const bannerMainContentStyles = [
      styles.bannerMainContent,
      !dismissible && styles.bannerMainContentWithoutDismiss,
    ];

    if (!action) {
      return (
        <View
          style={bannerMainContentStyles}
          accessibilityRole="alert"
          accessible={true}
          testID="ATL-Banner-Content"
        >
          {bannerContent}
        </View>
      );
    }

    return (
      <Pressable
        style={bannerMainContentStyles}
        accessibilityRole="alert"
        onPress={action.onPress}
        testID="ATL-Banner-Pressable"
      >
        {bannerContent}
      </Pressable>
    );
  };

  return (
    <View style={[styles.container]}>
      <View style={styles.bannerContent}>
        {renderBannerMainContent()}
        {dismissible && (
          <View style={styles.dismissContainer}>
            <Pressable
              style={styles.dismissButton}
              onPress={handleDismiss}
              accessibilityLabel={dismissAccessibilityLabel ?? t("dismiss")}
              accessibilityRole="button"
              testID="ATL-Banner-DismissButton"
            >
              <Icon name="cross" />
            </Pressable>
          </View>
        )}
      </View>
    </View>
  );
}

function BannerChildren({ children }: PropsWithChildren) {
  if (!children) return null;

  if (children && typeof children === "string") {
    return <Text level="text">{children}</Text>;
  }

  return children;
}

function WrappingElement({
  shouldFlow,
  children,
  styles,
}: PropsWithChildren<{
  readonly shouldFlow: boolean;
  readonly styles: ReturnType<typeof useStyles>;
}>): ReactElement {
  if (shouldFlow) {
    return <RNText testID="ATL-Banner-RNText">{children}</RNText>;
  }

  return (
    <View testID="ATL-Banner-View" style={styles.contentSpacing}>
      {children}
    </View>
  );
}

function getBannerIcon(type: BannerTypes): IconNames | undefined {
  switch (type) {
    case "notice":
      return "info";
    case "warning":
      return "warning";
    case "error":
      return "alert";
    case "success":
      return "checkmark";
  }
}