/* eslint-disable react/jsx-handler-names */
import React from 'react';
import { View } from 'react-native';
import ViewByFilter from './ViewByFilter';
import { formatMessage } from '../../../i18n';
import type {
    POTChartItemProps,
    POTSourceLabelProps,
    POTViewByFilterProps
} from '../types';
import { LabelMode } from '../../MultilineStreamsChart/MultilineStreamsChart';
import { MultilineStreamsChart } from '../../MultilineStreamsChart';
import EmptyState from '../../EmptyState';
import type { ThemeProps } from '../../../branding/hoc/types';
import { safeWithTheme } from '../../../branding';
import SourceLabel from '../../SourceLabel';
import { StreamsChartSkeleton } from '../../SkeletonLoaders';
import styles from '../styles';

export interface POTChartProps {
    viewByFilter?: POTViewByFilterProps;
    chart?: POTChartItemProps;
    sourceLabel?: POTSourceLabelProps;
    shouldExcludeAllOthers?: boolean;
}

const POTChart = (props: POTChartProps & ThemeProps) => {
    const { theme, viewByFilter, chart, sourceLabel, shouldExcludeAllOthers } =
        props;
    const themeStyle = styles[theme];
    const hasData = Boolean(chart?.data?.length);

    if (chart?.isLoading) {
        return <StreamsChartSkeleton />;
    }

    return (
        <View testID={chart?.testId}>
            {viewByFilter ? (
                <ViewByFilter
                    items={viewByFilter.items}
                    selectedItem={viewByFilter.selectedItem}
                    onFilterItemPress={viewByFilter.onFilterItemPress}
                    disabled={viewByFilter.disabled}
                />
            ) : null}
            {chart && hasData ? (
                <MultilineStreamsChart
                    lineOpacity={chart.lineOpacity ?? 1}
                    isStackedCharts={chart.isStackedCharts}
                    labelMode={chart.labelMode || LabelMode.chartsData}
                    toggleScroll={chart.toggleScroll}
                    chartConfigs={chart.data}
                    chartInteractionEventName={chart.interactionEventName}
                    customCursorMove={chart.customCursorMove}
                    showOriginMinValue={chart.showOriginMinValue}
                    customLabelElement={chart.customLabelElement}
                    lineStrokeWidth={chart.lineStrokeWidth}
                    shouldExcludeAllOthers={shouldExcludeAllOthers}
                />
            ) : (
                <View style={themeStyle.emptyState}>
                    <EmptyState
                        message={
                            chart?.emptyStateTitle ||
                            formatMessage('noData.streamingTrend.message')
                        }
                    />
                </View>
            )}
            {sourceLabel && !sourceLabel.loading && (
                <View style={themeStyle.sourceLabel}>
                    <SourceLabel
                        onPress={sourceLabel.handlePress}
                        referrer={sourceLabel.referrer}
                        trackEvent={sourceLabel.trackEvent}
                    />
                </View>
            )}
        </View>
    );
};

export default safeWithTheme(POTChart);