import React, {memo} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Button} from '@components';
import {useBackHandler} from '@hooks/useBackHandler';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import {useTheme} from '@shared/theme';
import {isAndroid} from '@shared/utils';

import {styles} from './styles';

interface FooterProps {
  totalSteps?: number;
  currentstep?: number;
  onBackPress: () => void;
  onNextPress: () => void;
  disableNext?: boolean;
  forceEnableBack?: boolean;
  nextLoading?: boolean;
  isEnding?: boolean;
  primaryText?: string;
}

function Footer({
  currentstep,
  onBackPress,
  onNextPress,
  disableNext,
  forceEnableBack,
  nextLoading,
  primaryText = 'general.continue',
}: FooterProps) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const isFirstStep = currentstep === 1;

  useBackHandler(() => {
    onBackPress();
    return true;
  }, !isFirstStep);

  const paddingBottom = useSafeAreaBottomPadding();

  return (
    <View
      style={[
        styles.container,
        {
          backgroundColor: theme.background.layout.tertiary,
          shadowColor: theme.shadow.inverted,
        },
        isAndroid ? {paddingBottom} : styles.noPadding,
        isAndroid && styles.noElevation,
      ]}>
      <View style={styles.footer}>
        <View style={styles.buttonContainer}>
          <Button
            variant="tertiary"
            onPress={onBackPress}
            disabled={isFirstStep && !forceEnableBack}
            text={t('general.back')}
          />
        </View>
        <View style={styles.buttonContainer}>
          <Button
            variant="primary"
            text={t(primaryText)}
            onPress={onNextPress}
            disabled={disableNext || nextLoading}
            isLoading={nextLoading}
          />
        </View>
      </View>
    </View>
  );
}

export default memo(Footer);