import { memo } from 'react';

import type { BoxProps } from '~/src/components/Box';
import type { MappedShow } from './types';

import Box from '~/src/components/Box';
import Link from '~/src/components/Link2';
import Text from '~/src/components/Text';
import { useI18n } from '~/src/lib/i18n';
import formatDate from '~/src/lib/utils/formatDate';
import { usePageTheme } from '../../hooks/theme';

const ShowListItem = memo<
  {
    item: MappedShow;
  } & BoxProps
>(({ item, ...boxProps }) => {
  const { t } = useI18n();
  const pageTheme = usePageTheme();

  return (
    <Box
      testId="showListItem"
      flexRow
      alignCenter
      padding="1.7rem 1.45rem"
      style={{
        border: 'solid 1px #333',
        borderRadius: '0.5rem',
        background: '#111',
        justifyContent: 'space-between',
        gap: '1rem',
      }}
      {...boxProps}
    >
      <Box>
        <Text
          color="#e6e6e6"
          size="1.5rem"
          title={`${item.venueName} (${item.name})`}
          lineClamp={3}
          // margin="0 0 1rem"
          family={pageTheme.fontFamily}
        >
          {
            // Some shows appear to have an empty `venueName` so we fallback to the event name in that case.
            item.venueName || item.name
          }
        </Text>
        <Text
          color="#808080"
          size="1.2rem"
          margin="0.4rem 0 0 0"
          family={pageTheme.fontFamily}
        >
          {
            // We set `useUtc: true` here because we want to display the same date for all users,
            // no matter in which timezone they are
            `${formatDate(item.localDate, { useUtc: true })}${
              // REVIEW: We display the distance betwen the user and the venue in kilometers,
              // but we could improve this by picking a better unit depending on the user's country.
              item.distanceFromUser
                ? ` ∙ ${t('item.shows.distance', {
                    distance: Math.round(item.distanceFromUser / 1000),
                  })}`
                : ''
            }`
          }
        </Text>
      </Box>
      <Box noFlexShrink>
        <Link href={item.url}>
          <Text size="1.5rem" isBold family={pageTheme.fontFamily}>
            {t('item.shows.tickets')}
          </Text>
        </Link>
      </Box>
    </Box>
  );
});

export default ShowListItem;