import React from "react";
import type { StyleProp, TextStyle } from "react-native";
import { Pressable, Text as RNText, View } from "react-native";
import type { IconNames } from "@jobber/design";
import { Icon } from "../../../Icon";
import { Text } from "../../../Text";
import { useTypographyStyles } from "../../../Typography";
import { useAtlantisTheme } from "../../../AtlantisThemeContext";
import { useStyles } from "../../InputFieldWrapper.style";

export interface SuffixLabelProps {
  readonly focused: boolean;
  readonly disabled?: boolean;
  readonly miniLabelActive: boolean;
  readonly inputInvalid?: boolean;
  readonly label: string;
  readonly hasLeftMargin?: boolean;
  readonly styleOverride?: StyleProp<TextStyle>;
}

export const suffixLabelTestId = "ATL-InputFieldWrapper-SuffixLabel";
export const suffixIconTestId = "ATL-InputFieldWrapper-SuffixIcon";

export function SuffixLabel({
  focused,
  disabled,
  miniLabelActive,
  inputInvalid,
  label,
  hasLeftMargin = true,
  styleOverride,
}: SuffixLabelProps) {
  const styles = useStyles();
  const typographyStyles = useTypographyStyles();

  return (
    <View
      testID={suffixLabelTestId}
      style={[
        styles.fieldAffix,
        focused && styles.inputFocused,
        inputInvalid && styles.inputInvalid,
        hasLeftMargin && styles.suffixLabelMargin,
      ]}
    >
      <View
        style={[
          styles.suffixLabel,
          miniLabelActive && styles.fieldAffixMiniLabel,
        ]}
      >
        {!styleOverride ? (
          <Text variation={disabled ? "disabled" : "base"}>{label}</Text>
        ) : (
          <RNText
            allowFontScaling={true}
            style={[
              typographyStyles.baseRegularRegular,
              typographyStyles.base,
              typographyStyles.defaultSize,
              disabled ? typographyStyles.subdued : typographyStyles.base,
              styleOverride,
            ]}
          >
            {label}
          </RNText>
        )}
      </View>
    </View>
  );
}

export interface SuffixIconProps {
  readonly focused: boolean;
  readonly disabled?: boolean;
  readonly inputInvalid?: boolean;
  readonly icon: IconNames;
  readonly hasLeftMargin?: boolean;
  readonly onPress?: () => void;
}

export function SuffixIcon({
  focused,
  disabled,
  inputInvalid,
  icon,
  hasLeftMargin = false,
  onPress,
}: SuffixIconProps) {
  const styles = useStyles();
  const { tokens } = useAtlantisTheme();

  return (
    <View
      testID={suffixIconTestId}
      style={[
        styles.fieldAffix,
        focused && styles.inputFocused,
        inputInvalid && styles.inputInvalid,
      ]}
    >
      <Pressable
        style={[styles.suffixIcon, hasLeftMargin && styles.suffixIconMargin]}
        onPress={onPress}
      >
        <Icon
          customColor={
            disabled
              ? tokens["color-disabled"]
              : tokens["color-icon--secondary"]
          }
          name={icon}
        />
      </Pressable>
    </View>
  );
}