import type { SelectedAnalyticsPresaveEvents } from '~/src/store/dashboard/selectors/analytics';
import type { ReactNode } from 'react';

import { ReleaseTaskTypes } from '~/lib/songwhipApi/types';
import { ServiceTypes } from '~/lib/types';
import Box from '~/src/components/Box';
import EmailIcon from '~/src/components/Icon/EmailIcon';
import PageLoading from '~/src/components/PageLoading';
import Text from '~/src/components/Text';
import useTheme from '~/src/hooks/useTheme';
import getServiceDisplayData from '~/src/lib/getServiceDisplayData';
import { useI18n } from '~/src/lib/i18n';
import toShortNumber from '~/src/lib/utils/toShortNumber';
import HorizontalBarChart from './HorizontalBarChart';

interface ChartItem {
  color: string;
  label: ReactNode;
  detailText: string;
  total: number;
}

const RELEASE_TASK_DATA = {
  [ReleaseTaskTypes.EMAIL_NOTIFICATION]: {
    name: 'Email subscribers',
    Icon: EmailIcon,
    color: '#888',
  },

  [ReleaseTaskTypes.SPOTIFY_PRESAVE]: {
    ...getServiceDisplayData(ServiceTypes.SPOTIFY)!,
    name: 'Spotify presaves',
  },

  [ReleaseTaskTypes.APPLE_MUSIC_PRESAVE]: {
    ...getServiceDisplayData(ServiceTypes.ITUNES)!,
    name: 'Apple Music presaves',
  },

  [ReleaseTaskTypes.DEEZER_PRESAVE]: {
    ...getServiceDisplayData(ServiceTypes.DEEZER)!,
    name: 'Deezer presaves',
  },

  [ReleaseTaskTypes.AMAZON_MUSIC_PRESAVE]: {
    ...getServiceDisplayData(ServiceTypes.AMAZON_MUSIC)!,
    name: 'Amazon Music presaves',
  },
};

const PresaveEventsChart = ({
  data,
  totalDays,
}: {
  data?: SelectedAnalyticsPresaveEvents;
  totalDays: number;
}) => {
  const { t } = useI18n('dashboard');
  const theme = useTheme();

  const chartItems = data?.items
    .map(({ total, presaveType }): ChartItem | undefined => {
      const displayData = RELEASE_TASK_DATA[presaveType];

      if (!displayData) {
        return;
      }

      const { Icon, name } = displayData;

      return {
        color: displayData.color,
        total,

        detailText: t('totalServicePresaves', {
          total,
          serviceName: displayData.name,
        }),

        label: (
          <>
            <Icon size="1.3em" isInline margin="0 0.5em 0 0" />
            <Text isInline isBold size="0.9em">
              {name}
            </Text>
          </>
        ),
      };
    })
    .filter((item: ChartItem): item is ChartItem => !!item);

  return (
    <Box testId="dashboardPresavesChart" positionRelative>
      {(() => {
        if (!chartItems || !data) return <PageLoading />;

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

export default PresaveEventsChart;