import React, {FC} from 'react';
import _ from 'lodash';
import {useNavigation} from '@react-navigation/native';
import {IProps} from '@components/Header/types';
import BackIcon from '@assets/svg/BackIcon';
import DeleteIcon from '@assets/svg/DeleteIcon';
import {
  Container,
  Wrapper,
  BackButton,
  DeleteButton,
  Title,
} from '@styles/components/header';

const Header: FC<IProps> = ({
  showBackButton = true,
  title,
  onBack,
  onDelete,
  headerStyle,
  titleStyle,
  backArrowStyle,
}) => {
  const navigation = useNavigation();
  return (
    <Container edges={['top', 'left', 'right']}>
      <Wrapper style={headerStyle}>
        {showBackButton && (
          <BackButton
            onPress={() => {
              if (_.isFunction(onBack)) {
                onBack();
              } else if (navigation.canGoBack()) {
                navigation.goBack();
              }
            }}
            testID="bkBtn">
            <BackIcon style={backArrowStyle} />
          </BackButton>
        )}
        {!!title && <Title style={titleStyle}>{title}</Title>}
        {_.isFunction(onDelete) && (
          <DeleteButton onPress={onDelete} testID="dltBtn">
            <DeleteIcon />
          </DeleteButton>
        )}
      </Wrapper>
    </Container>
  );
};

export default Header;