import React from 'react';
import { useTranslation } from 'utils/i18n';
import { GridItem, Input } from '@nova-hf/ui';
import { Customer, Maybe } from 'typings/graphql';

type NationalRegistryFieldsProps = {
  customer?: Maybe<Customer>;
};

export const NationalRegistryFields = ({ customer }: NationalRegistryFieldsProps) => {
  const { t } = useTranslation('stillingar');

  return (
    <>
      <GridItem gridColumn={{ sm: 'span4', md: 'span6', lg: 'span4' }}>
        <Input
          id="nationalId"
          label={t('personalTab.nationalIdLabel')}
          name="nationalIdInput"
          value={customer?.legalEntity?.nationalId ?? t('errors.notRegistered')}
          disabled
        />
      </GridItem>
      <GridItem gridColumn={{ sm: 'span4', md: 'span6', lg: 'span4' }}>
        <Input
          id="name"
          label={t('personalTab.nameLabel')}
          name="name"
          value={customer?.legalEntity?.name ?? t('errors.notRegistered')}
          disabled
        />
      </GridItem>
      <GridItem gridColumn={{ sm: 'span4', md: 'span4', lg: 'span4' }} hiddenOn={['md']} />
      <GridItem gridColumn={{ sm: 'span4', md: 'span6', lg: 'span4' }}>
        <Input
          id="address"
          label={t('personalTab.addressLabel')}
          name="addressInput"
          value={customer?.legalEntity?.address ?? t('errors.notRegistered')}
          disabled
        />
      </GridItem>
      <GridItem gridColumn={{ sm: 'span4', md: 'span6', lg: 'span4' }}>
        <Input
          id="postCode"
          label={t('personalTab.postcodeLabel')}
          name="postCodeInput"
          value={customer?.legalEntity?.postCode ?? t('errors.notRegistered')}
          disabled
        />
      </GridItem>
      <GridItem gridColumn={{ sm: 'span4', md: 'span6', lg: 'span4' }}>
        <Input
          id="city"
          label={t('personalTab.cityLabel')}
          name="cityInput"
          value={customer?.legalEntity?.city || t('errors.notRegistered')}
          disabled
        />
      </GridItem>
    </>
  );
};