// TODO: Use sub components instead of props
import React, {useCallback} from 'react';
import {LayoutChangeEvent, StyleProp, View, ViewStyle} from 'react-native';
import {IconInfoCircle, IconProps} from '@tabler/icons-react-native';
import {Typography} from '@components/_core/Typography';
import {Button, ButtonVariant} from '@components/_HuGo/Button';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import {SetState} from '@interfaces/generic';
import {useTheme} from '@shared/theme';
import {isAndroid} from '@shared/utils';

import {styles} from './styles';

type FooterButton = {
  text: string;
  onPress: () => void;
  isLoading?: boolean;
  disabled?: boolean;
  testID?: string;
  IconRight?: React.FC<IconProps>;
  variant?: ButtonVariant;
  IconLeft?: React.FC<IconProps>;
};

export interface BottomModalFooterProps {
  primaryButton?: FooterButton;
  secondaryButton?: FooterButton;
  infoText?: string;
  InfoTextSufix?: React.ReactNode;
  withIconPrefix?: boolean;
  infoTextNumberOfLines?: number;
  infoTextColor?: string;
  extraComponent?: React.ReactNode;
}

interface Props {
  footer: BottomModalFooterProps;
  setFooterHeight?: SetState<number>;
  style?: StyleProp<ViewStyle>;
}

export function BottomModalFooter({
  footer: {
    primaryButton,
    secondaryButton,
    infoText,
    InfoTextSufix,
    withIconPrefix = true,
    infoTextNumberOfLines,
    infoTextColor,
    extraComponent,
  },
  setFooterHeight,
  style,
}: Props) {
  const {theme, iconSizes, spacing} = useTheme();
  const paddingBottom = useSafeAreaBottomPadding({
    bottom: spacing.x2,
    extra: isAndroid ? spacing.x2 : 0,
  });

  const onFooterLayout = useCallback(
    (event: LayoutChangeEvent) => {
      setFooterHeight?.(event.nativeEvent.layout.height);
    },
    [setFooterHeight],
  );

  return (
    <View
      onLayout={onFooterLayout}
      style={[
        {
          paddingBottom,
          backgroundColor: theme.background.layout.tertiary,
          borderTopColor: theme.border.neutral.default,
        },
        styles.container,
        style,
      ]}>
      {infoText && (
        <View style={styles.infoContent}>
          {withIconPrefix && (
            <IconInfoCircle
              stroke={infoTextColor || theme.text.neutral.lighter}
              size={iconSizes.x5}
            />
          )}
          <Typography
            variant="xs"
            color={infoTextColor || theme.text.neutral.lighter}
            numberOfLines={infoTextNumberOfLines}
            style={!!InfoTextSufix && styles.infoText}>
            {infoText}
          </Typography>
          {!!InfoTextSufix && InfoTextSufix}
        </View>
      )}
      {primaryButton && (
        <Button
          variant={primaryButton.variant || 'primary'}
          text={primaryButton.text}
          onPress={primaryButton.onPress}
          isLoading={primaryButton.isLoading}
          disabled={primaryButton.disabled}
          testID={primaryButton.testID}
          IconRight={primaryButton.IconRight}
          IconLeft={primaryButton.IconLeft}
        />
      )}
      {secondaryButton && (
        <Button
          variant={secondaryButton.variant || 'tertiary'}
          text={secondaryButton.text}
          onPress={secondaryButton.onPress}
          isLoading={secondaryButton.isLoading}
          disabled={secondaryButton.disabled}
          testID={secondaryButton.testID}
          IconRight={secondaryButton.IconRight}
          IconLeft={secondaryButton.IconLeft}
        />
      )}
      {!!extraComponent && extraComponent}
    </View>
  );
}
