import React, {useLayoutEffect} from 'react';
import {View} from 'react-native';
import {IconCheck} from '@tabler/icons-react-native';
import {useNavigation} from '@react-navigation/native';
import {Typography} from '@components';
import {
  Avatar,
  Button,
  ButtonProps,
  CloseButton,
  Spinner,
  StateCard,
  Title,
} from '@components/_HuGo';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  title: string;
  description: string;
  isLoading: boolean;
  primaryButton: ButtonProps;
  withStateCard?: boolean;
  headerTitle?: string;
  secondaryButton?: ButtonProps;
  descriptionNumberOfLines?: number;
  isLongDescription?: boolean;
}

export function FormSuccessConfirmation({
  title,
  description,
  isLoading,
  primaryButton,
  secondaryButton,
  withStateCard = false,
  headerTitle,
  descriptionNumberOfLines = 2,
  isLongDescription = false,
}: Props) {
  const navigation = useNavigation();
  const {theme} = useTheme();
  const paddingBottom = useSafeAreaBottomPadding();

  useLayoutEffect(() => {
    const headerRight = () => <CloseButton onPress={primaryButton.onPress} />;

    navigation.setOptions({
      headerLeft: () => null,
      headerRight,
      ...(headerTitle && {title: headerTitle}),
    });
  }, [navigation, primaryButton.onPress, headerTitle]);

  return (
    <View
      style={[
        styles.container,
        {paddingBottom, backgroundColor: theme.background.layout.default},
      ]}>
      {isLoading ? (
        <Spinner />
      ) : (
        <>
          <View
            style={[styles.content, withStateCard && styles.stateCardContent]}>
            {withStateCard ? (
              <StateCard
                variant="success"
                title={title}
                description={description}
              />
            ) : (
              <>
                <Avatar size="lg" Icon={IconCheck} variant="success" />
                <Title
                  center
                  title={title}
                  titleNumberOfLines={2}
                  {...(!isLongDescription && {
                    description,
                    descriptionNumberOfLines,
                  })}
                />
                {isLongDescription && (
                  <Typography color={theme.text.neutral.lighter} variant="xs">
                    {description}
                  </Typography>
                )}
              </>
            )}
          </View>
          <View style={styles.buttons}>
            <Button {...primaryButton} />
            {secondaryButton && (
              <Button {...secondaryButton} variant="tertiary" />
            )}
          </View>
        </>
      )}
    </View>
  );
}