import React from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {IconArrowLeft, IconMaximize, IconX} from '@tabler/icons-react-native';
import {IconButton, Title, ProgressBar} from '@components';
import {useGoBack} from '@hooks/useGoBack';
import {LessonType} from '@modules/learning/interfaces';
import {useTheme} from '@shared/theme';
import {getCroppedText} from '@shared/utils/texts';

import {styles} from './styles';

interface Props {
  title?: string;
  type?: LessonType;
  onClose?: () => void;
  style?: StyleProp<ViewStyle>;
  onFullScreen?: () => void;
  progress?: number;
  hideProgressBar?: boolean;
  reverseItems?: boolean;
  showArrowBack?: boolean;
  returnArrow?: boolean;
  hideRightIcon?: boolean;
  onArrowPress?: () => void;
}

function LessonHeader({
  title,
  type,
  onClose,
  style,
  onFullScreen,
  progress,
  hideProgressBar = false,
  reverseItems = false,
  showArrowBack = false,
  returnArrow = false,
  hideRightIcon = false,
  onArrowPress,
}: Props) {
  const {goBack} = useGoBack();
  const {theme} = useTheme();

  const onIconPress = () => {
    if (onClose) {
      onClose();
    } else {
      goBack();
    }
  };

  const onBackPress = () => {
    if (onArrowPress) {
      onArrowPress();
    } else {
      goBack();
    }
  };

  return (
    <View
      style={[
        hideProgressBar && styles.borderBottom,
        {
          borderBottomColor: theme.border.neutral.default,
          backgroundColor: theme.background.layout.tertiary,
        },
      ]}>
      <View
        style={[
          styles.container,
          type === LessonType.Scorm && styles.containerPortrait,
          style,
          reverseItems && styles.reverseItems,
        ]}>
        {returnArrow ? (
          <IconButton
            Icon={IconArrowLeft}
            onPress={onBackPress}
            iconColor={theme.text.neutral.default}
            style={styles.icon}
            variant="flat"
          />
        ) : type && onFullScreen ? (
          <IconButton
            Icon={IconMaximize}
            onPress={onFullScreen}
            iconColor={theme.text.neutral.default}
            style={styles.icon}
            variant="flat"
          />
        ) : (
          <View style={styles.emptyContainer} />
        )}
        <View style={styles.titleContainer}>
          {title && (
            <Title
              size="s"
              title={getCroppedText({
                body: title,
                limit: 30,
              })}
            />
          )}
        </View>
        {!hideRightIcon && (
          <IconButton
            Icon={showArrowBack ? IconArrowLeft : IconX}
            onPress={onIconPress}
            iconColor={theme.text.neutral.default}
            variant="flat"
          />
        )}
      </View>
      {!hideProgressBar && <ProgressBar progress={progress} total={100} />}
    </View>
  );
}

export default LessonHeader;