import getServiceDisplayData from '~/src/lib/getServiceDisplayData';
import { useI18n } from '~/src/lib/i18n';
import { ReferrerTotal } from '~/src/lib/songwhipApi/analytics/types';
import { Table } from '~/src/ui/components/table';
import { Layout } from '~/src/ui/layouts/layout';
import { Text } from '~/src/ui/primitives/text';
import { createTotalRow, domainToService } from '../utils';
import { ServiceIcon } from './ServiceIcon';
import { TotalRow } from './TotalsRow';

export const ReferrerTable = ({ data }: { data: ReferrerTotal[] }) => {
  const { t } = useI18n();
  const totalsRow = createTotalRow(data, 'referrer');

  return (
    <Table
      rows={[totalsRow, ...data]}
      getRowKey={(row) => row.referrer}
      columns={[
        {
          key: 'referrer',
          header: t('dashboard.labels.referrer'),
          renderCell: (row, { rowIndex }) => {
            if (rowIndex === 0) {
              return <TotalRow total={data.length} />;
            }

            const service = domainToService(row.referrer);
            const display = getServiceDisplayData(service);

            return (
              <Layout gap="2" align="center">
                <ServiceIcon service={service} />
                <Text variant="body-small">
                  {display?.name ||
                    service ||
                    row.referrer ||
                    t('dashboard.labels.unknown')}
                </Text>
              </Layout>
            );
          },
        },
        {
          key: 'total',
          header: t('dashboard.labels.clicks'),
          align: 'right',
          renderCell: (row) => {
            return row.total;
          },
        },
      ]}
    />
  );
};