import type { FC } from 'react';
import React from 'react';
import type { ViewStyle } from 'react-native';
import { View, TouchableOpacity } from 'react-native';
import { useTheme } from '../../branding';
import themedStyles from './styles';
import Close from '../Icons/Close';
import type { HeaderProps } from './types';
import { BOTTOM_SHEET_ELEMENTS_ALIGNMENT } from './constants.ts';
import Title from './Title.tsx';

const Header: FC<HeaderProps> = ({
    title,
    onBottomSheetClose,
    titleAlign = BOTTOM_SHEET_ELEMENTS_ALIGNMENT.left,
    showCloseButton = true,
    closeButtonAlign = BOTTOM_SHEET_ELEMENTS_ALIGNMENT.right
}) => {
    const { theme } = useTheme();
    const styles = themedStyles[theme];

    const titleAlignmentStyles = {
        left: styles.titleLeft,
        center: styles.titleCenter,
        right: styles.titleRight
    };

    const closePos = {
        right: styles.closeButtonRight,
        left: styles.closeButtonLeft
    };
    const headerPos = {
        right: styles.headerWithCloseRight,
        left: styles.headerWithCloseLeft
    };

    const closeButtonStyles = closePos[closeButtonAlign];

    const titleContainerStyles = [
        styles.titleContainer,
        titleAlignmentStyles[titleAlign],
        showCloseButton &&
            titleAlign === closeButtonAlign &&
            headerPos[titleAlign]
    ];

    return (
        <View style={styles.header}>
            <Title title={title} style={titleContainerStyles as ViewStyle[]} />
            {showCloseButton ? (
                <TouchableOpacity
                    hitSlop={15}
                    onPress={onBottomSheetClose}
                    testID="closeButton"
                    style={closeButtonStyles}
                >
                    <Close size={16} />
                </TouchableOpacity>
            ) : null}
        </View>
    );
};

export default Header;