import type { ReactElement } from 'react';
import React from 'react';
import { View } from 'react-native';
import { noop } from '../../utils/functions';
import Button from '../Button';
import Divider from '../Divider';
import Typography from '../Typography';
import {
  StyledFloatingHeaderWrapper,
  StyledHeader,
  StyledHeaderWrapper,
  StyledIconWrapper,
} from './StyledBottomSheet';
import Icon from '../Icon';
import { useTheme } from '../../theme';

const Header = ({
  content,
  showDivider,
  onRequestClose = noop,
  showCloseButton,
  variant = 'fixed',
}: {
  content: string | ReactElement;
  showDivider: boolean;
  onRequestClose?: () => void;
  showCloseButton: boolean;
  variant?: 'fixed' | 'floating';
}) => {
  const theme = useTheme();

  return (
    <>
      <StyledHeaderWrapper>
        {typeof content === 'string' ? (
          <StyledHeader>
            <Typography.Body variant="regular-bold">{content}</Typography.Body>
          </StyledHeader>
        ) : (
          <View style={{ flex: 1 }}>{content}</View>
        )}
        {showCloseButton ? (
          <StyledIconWrapper>
            {variant === 'fixed' ? (
              <Button.Icon
                icon="cancel"
                onPress={onRequestClose}
                intent="text"
                testID="bottom-sheet-close-icon"
                size="xxxsmall"
              />
            ) : (
              <StyledFloatingHeaderWrapper
                onPress={onRequestClose}
                testID="bottom-sheet-close-icon"
              >
                <Icon
                  icon="cancel"
                  style={{
                    fontSize: theme.__hd__.bottomSheet.sizes.closeIconSize,
                  }}
                />
              </StyledFloatingHeaderWrapper>
            )}
          </StyledIconWrapper>
        ) : null}
      </StyledHeaderWrapper>
      {showDivider ? <Divider /> : null}
    </>
  );
};

export default Header;