/* eslint-disable react/jsx-handler-names */
import React from 'react';
import { View } from 'react-native';
import type { ThemeProps } from '../../branding/hoc/types';
import POTChart from './chart/POTChart';
import type { POTComponentProps } from './types';
import styles from './styles';
import POTTable from './table/POTTable';
import accessibilityParams from '../../accessibility';
import { StreamsChartSkeleton, StreamsTableSkeleton } from '../SkeletonLoaders';
import POTHeader from './POTHeader';
import { safeWithTheme } from '../../branding';
import withComponentErrorBoundary from '../../hoc/withComponentErrorBoundary';
import useHasFeature from '../../hooks/auth/useHasFeature';
import { MOBILE_STREAMS_CHART_STORE_UPDATE } from '../../constants/features';
import {
    POT_COUNTRY_VIEW,
    POT_STORE_VIEW,
    TIKTOK_POT_COUNTRY_VIEW
} from '../../constants/events';
import { checkExcludeAllOthers } from '../../utils/pot-component-config';
import useStoreSelectionFilters from '../../hooks/useStoreSelectionFilters';

export const EXCLUDE_ALL_OTHERS_FOR = [
    POT_COUNTRY_VIEW,
    POT_STORE_VIEW,
    TIKTOK_POT_COUNTRY_VIEW
];

const POTComponent = (props: POTComponentProps & ThemeProps) => {
    const {
        theme,
        customContainerStyles,
        header,
        chart,
        viewByFilter,
        table,
        isLoading,
        accessibilityParam,
        testId,
        chartType,
        switchSelectorOptions,
        switchSelectorValue,
        onSwitchSelectorPress,
        hasStoreSelectionDropdown
    } = props;
    const themeStyle = styles[theme];
    const hasUpdatedStoreChart = useHasFeature(
        MOBILE_STREAMS_CHART_STORE_UPDATE
    );
    const shouldExcludeAllOthers =
        hasUpdatedStoreChart && checkExcludeAllOthers(chartType);
    const { selectedStoreName } = useStoreSelectionFilters();

    if (isLoading) {
        return (
            <>
                <StreamsChartSkeleton />
                <StreamsTableSkeleton />
            </>
        );
    }
    return (
        <View
            style={[themeStyle.container, customContainerStyles]}
            testID={testId}
            {...accessibilityParams(accessibilityParam)}
        >
            <POTHeader
                hasStoreSelectionDropdown={hasStoreSelectionDropdown}
                theme={theme}
                header={header}
                chart={chart}
            />
            {chart ? (
                <POTChart
                    chart={chart}
                    viewByFilter={viewByFilter}
                    shouldExcludeAllOthers={shouldExcludeAllOthers}
                />
            ) : null}
            {table ? (
                <POTTable
                    data={table.data}
                    onRowPress={table.onRowPress}
                    clickableRows={table.clickableRows}
                    rowInteractionEventName={table.rowInteractionEventName}
                    selectedRow={table.selectedRow}
                    isLoading={table.isLoading}
                    sourceLabel={table.sourceLabel}
                    testId={table.testId}
                    has1DayCell={table.has1DayCell}
                    has7DaysCell={table.has7DaysCell}
                    has28DaysCell={table.has28DaysCell}
                    hasAllTimeCell={table.hasAllTimeCell}
                    shouldExcludeAllOthers={shouldExcludeAllOthers}
                    switchSelectorOptions={switchSelectorOptions}
                    switchSelectorValue={switchSelectorValue}
                    onSwitchSelectorPress={onSwitchSelectorPress}
                    hasGrowthPercentage={
                        switchSelectorValue !== 'allTime' &&
                        table.hasGrowthPercentage
                    }
                    selectedStoreName={
                        hasStoreSelectionDropdown ? selectedStoreName : ''
                    }
                />
            ) : null}
        </View>
    );
};

export default safeWithTheme(
    withComponentErrorBoundary(POTComponent, POTHeader)
);