import React from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconArrowLeft} from '@tabler/icons-react-native';
import {IconButton, CloseButton} from '@components/_HuGo/Button';
import {Typography} from '@components/_core/Typography';
import {SPACING} from '@shared/theme';

import {styles} from './styles';

export interface BottomModalHeaderProps {
  title?: string;
  subtitle?: string;
  titleNumberOfLines?: number;
  onGoBack?: () => void;
  withCloseButton?: boolean;
  withBackButton?: boolean;
  onClose?: () => void;
  style?: StyleProp<ViewStyle>;
}

export function BottomModalHeader({
  title,
  subtitle,
  titleNumberOfLines = 1,
  withBackButton,
  onGoBack,
  onClose,
  style,
  withCloseButton = true,
}: BottomModalHeaderProps) {
  const {t} = useTranslation();
  const hasIcon = withBackButton || withCloseButton;

  return (
    <View style={[styles.container, style]} accessible={false}>
      <View style={hasIcon && styles.iconContainer}>
        {withBackButton && (
          <IconButton
            Icon={IconArrowLeft}
            onPress={onGoBack}
            hitSlop={SPACING.x2}
            variant="tertiary"
            size="lg"
          />
        )}
      </View>
      <View style={styles.titleWithSubtitleContainer}>
        {title && (
          <Typography
            weight="semiBold"
            numberOfLines={titleNumberOfLines}
            align="center">
            {title}
          </Typography>
        )}
        {subtitle && (
          <Typography variant="xs" align="center">
            {subtitle}
          </Typography>
        )}
      </View>
      <View style={hasIcon && styles.iconContainer} accessible={false}>
        {withCloseButton && (
          <CloseButton
            onPress={onClose}
            size="lg"
            accessibilityLabel={t('general.close')}
          />
        )}
      </View>
    </View>
  );
}
