import React from 'react';
import { View } from 'react-native';
import { safeWithTheme } from '../../../branding';
import { SourceOfStreamsTable } from '../../SourceOfStreamsTable';
import type { POTTableProps } from '../types';
import SourceLabel from '../../SourceLabel';
import styles from '../styles';
import type { ThemeProps } from '../../../branding/hoc/types';
import { StreamsTableSkeleton } from '../../SkeletonLoaders';
import SwitchSelectorComponent from '../../../componentsDS/SwitchSelector';

const POTTable = (props: POTTableProps & ThemeProps) => {
    const {
        data,
        clickableRows,
        onRowPress,
        selectedRow,
        rowInteractionEventName,
        isLoading,
        sourceLabel,
        theme,
        testId,
        shouldExcludeAllOthers,
        switchSelectorOptions,
        onSwitchSelectorPress,
        switchSelectorValue,
        hasGrowthPercentage,
        selectedStoreName,
        has1DayCell,
        has7DaysCell,
        hasAllTimeCell,
        has28DaysCell
    } = props;
    const themeStyle = styles[theme];
    if (isLoading) {
        return <StreamsTableSkeleton />;
    }

    return (
        <View
            style={[themeStyle.container, { paddingTop: 14 }]}
            testID={testId}
        >
            <SwitchSelectorComponent
                options={switchSelectorOptions}
                onSwitchSelectorPress={onSwitchSelectorPress}
                value={switchSelectorValue}
            />
            <SourceOfStreamsTable
                streamsBreakdowns={data}
                has1DayCell={has1DayCell}
                has7DaysCell={has7DaysCell}
                has28DaysCell={has28DaysCell}
                hasAllTimeCell={hasAllTimeCell}
                clickableRows={clickableRows}
                selectedRow={selectedRow}
                onRowPress={onRowPress}
                rowInteractionEventName={rowInteractionEventName}
                shouldExcludeAllOthers={shouldExcludeAllOthers}
                hasGrowthPercentage={hasGrowthPercentage}
                selectedStoreName={selectedStoreName}
            />
            {sourceLabel && !sourceLabel.loading ? (
                <View style={themeStyle.sourceLabel}>
                    <SourceLabel
                        referrer={sourceLabel.referrer}
                        onPress={sourceLabel.handlePress}
                        trackEvent={sourceLabel.trackEvent}
                    />
                </View>
            ) : null}
        </View>
    );
};

export default safeWithTheme(POTTable);