import React from 'react';
import { Text, View } from 'react-native';
import { formatMessage } from '../../i18n';
import styles from './styles';
import type { ThemeProps } from '../../branding/hoc/types';
import type { HeaderProps, POTChartItemProps } from './types';
import StoreSelectionButton from '../../componentsDS/StoreSelectionButton';

interface Props {
    header?: HeaderProps;
    chart?: POTChartItemProps;
    hasStoreSelectionDropdown?: boolean;
}

type PartialThemeProps = Pick<ThemeProps, 'theme'>;

const PotHeader = (props: Props & PartialThemeProps) => {
    const { theme, header, chart, hasStoreSelectionDropdown } = props;
    const themeStyle = styles[theme];
    const days = chart?.data?.[0]?.timeseries?.length || 0;

    return (
        <View style={themeStyle.header} testID="potHeader">
            <Text style={themeStyle.title}>{header?.title}</Text>
            {!header?.subtitleIsHidden ? (
                <Text style={themeStyle.subtitle} testID="pastDaysPeriod">
                    {Boolean(days) &&
                        formatMessage('period.pastDays', {
                            days
                        }).toUpperCase()}
                </Text>
            ) : null}
            {hasStoreSelectionDropdown && (
                <StoreSelectionButton
                    storeName={header?.storeName}
                    title={header?.storeButtonTitle}
                    onButtonPress={header?.onStoreSelectionButtonPress}
                />
            )}
        </View>
    );
};

export default PotHeader;