import type { SelectedAnalyticsOpenEvents } from '~/src/store/dashboard/selectors/analytics';

import Box from '~/src/components/Box';
import PageLoading from '~/src/components/PageLoading';
import Text from '~/src/components/Text';
import useTheme from '~/src/hooks/useTheme';
import { resolveServiceDataFromUrl } from '~/src/lib/getServiceDisplayData';
import { useI18n } from '~/src/lib/i18n';
import toShortNumber from '~/src/lib/utils/toShortNumber';
import HorizontalBarChart from './HorizontalBarChart';

const OpenEventsChart = ({ data }: { data?: SelectedAnalyticsOpenEvents }) => {
  const theme = useTheme();
  const { t } = useI18n('dashboard');

  const chartItems = data?.items.map(({ total, url }) => {
    const { Icon, name, color } = resolveServiceDataFromUrl(url);

    return {
      detailText: t('totalClicksOnUrl', { total, url }),
      color,
      label: (
        <>
          <Icon size="1.3em" isInline margin="0 0.5em 0 0" />
          <Text isInline isBold size="0.9em">
            {name}
          </Text>
        </>
      ),
      total,
    };
  });

  return (
    <Box testId="dashboardClicksChart" positionRelative>
      {(() => {
        if (!data?.items) return <PageLoading />;

        return (
          <>
            <Text isBold centered size="1.5em" color={theme.textColor90}>
              {t('totalButtonClicks', { total: toShortNumber(data.total) })}
            </Text>
            <Text
              size="0.9em"
              color={theme.textColor40}
              centered
              margin="0.4em 0 2em"
            >
              {t('totalButtonClicksHelp')}
            </Text>
            <HorizontalBarChart
              items={chartItems!}
              total={data.total}
              metric="clicks"
            />
          </>
        );
      })()}
    </Box>
  );
};

export default OpenEventsChart;