import type { LookupResult } from './types';

import Box from '~/src/components/Box';
import Card from '~/src/components/Card';
import { TableCell, TableRow } from '~/src/components/Table';
import { SERVICES } from './constants';
import { getLinkUrl } from './utils';

export const LookupResultTable = ({
  result,
  services,
}: {
  result?: LookupResult;
  services: string[];
}) => {
  return (
    <Box>
      <Card style={{ overflow: 'scroll', width: '100%' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <TableRow>
              <TableCell isHead style={{ width: '80px' }}>
                Status
              </TableCell>
              <TableCell isHead style={{ width: 'auto' }}>
                Name
              </TableCell>
              {services.map((service) => (
                <TableCell
                  key={service}
                  isHead
                  style={{ width: 'auto', whiteSpace: 'nowrap' }}
                >
                  {SERVICES[service]}
                </TableCell>
              ))}
            </TableRow>
          </thead>
          <tbody>
            {result?.map(({ name, error, spotifyId, links }) => (
              <TableRow key={spotifyId}>
                <TableCell style={{ maxWidth: '100%' }}>
                  {error ? (
                    <span title={error} style={{ color: 'red' }}>
                      FAILED
                    </span>
                  ) : (
                    <span style={{ color: 'green' }}>OK</span>
                  )}
                </TableCell>
                <TableCell style={{ maxWidth: '100%', whiteSpace: 'nowrap' }}>
                  {name}
                </TableCell>
                {services.map((service) => (
                  <TableCell
                    key={service}
                    style={{ maxWidth: '100%', whiteSpace: 'nowrap' }}
                  >
                    {getLinkUrl(links[service])}
                  </TableCell>
                ))}
              </TableRow>
            ))}
          </tbody>
        </table>
      </Card>
    </Box>
  );
};