import React from 'react';
import { Box, InfoCard, TextWithPill } from '@nova-hf/ui';
import { SearchHit } from 'typings/graphql';
import { formatNationalId } from 'utils/helpers';

type PanelCardProps = {
  hit: SearchHit;
  isSearching?: boolean;
  onClick: (nationalId: string) => void;
};

export const PanelCard = ({ hit, isSearching, onClick }: PanelCardProps) => {
  type GeneralHitType = {
    longTitle: string;
    description: string;
    pillTitle: string;
    pillSubtitle: string;
    nationalId: string;
  };
  let mappedHit: GeneralHitType;
  switch (hit.__typename) {
    case 'PersonSearchResult':
    case 'OrganizationSearchResult':
      mappedHit = {
        longTitle: hit.name,
        description: formatNationalId(hit.nationalId),
        pillTitle: hit.customer?.name ?? '',
        pillSubtitle: hit.customer?.email ?? '',
        nationalId: hit.customer?.nationalId ?? '',
      };
      break;
    case 'ServiceSearchResult':
      mappedHit = {
        longTitle: hit.user.name,
        description: hit.title,
        nationalId: hit.user.nationalId ?? '',
        pillTitle: '',
        pillSubtitle: '',
      };
      break;
    case 'RepairSearchResult':
      mappedHit = {
        longTitle: hit.title ?? '',
        description: hit.description ?? '',
        pillTitle: hit.customer?.name ?? '',
        pillSubtitle: '',
        nationalId: hit.customer?.nationalId ?? '',
      };
      break;
    default:
      mappedHit = {
        longTitle: '',
        description: '',
        pillTitle: '',
        pillSubtitle: '',
        nationalId: '',
      };
      break;
  }

  if (!mappedHit.longTitle) return null;
  return (
    <Box
      renderAs="button"
      marginBottom={2}
      height="100%"
      width="100%"
      onClick={() => onClick(mappedHit.nationalId)}
    >
      <InfoCard
        height="100%"
        color={isSearching ? 'grey400' : 'pink'}
        icon={{
          icon: 'happy',
        }}
        longTitle={mappedHit.longTitle}
        description={mappedHit.description}
        boxShadow="none"
      >
        <TextWithPill
          titleVariant="eyebrowMedium"
          title={mappedHit.pillTitle}
          subtitle={mappedHit.pillSubtitle}
        />
      </InfoCard>
    </Box>
  );
};