import React from 'react';
import { Box, Grid, GridItem, Text } from '@nova-hf/ui';
import { useRouter } from 'next/router';
import { useCustomerQuery } from 'typings/graphql';
import { StillingarLoader } from '../components/StillingarLoader';
import { ContactInformation } from './ContactInformation';
import { useTranslation } from 'utils/i18n';
import { NationalRegistryFields } from '../components/NationalRegistryFields';
import { TitleAndNick } from './TitleAndNick';

export const Personal = () => {
  const { t } = useTranslation('stillingar');
  const { query } = useRouter();
  const customerId: string = (query.customerId as string) ?? '';
  const {
    data: customerData,
    loading,
    error,
    refetch,
  } = useCustomerQuery({
    variables: {
      input: {
        id: customerId,
      },
    },
  });

  if (error) return null;
  if (loading) return <StillingarLoader />;

  return (
    <Box paddingTop={8}>
      <Grid gridTemplate={{ sm: 4, md: 12 }}>
        <GridItem gridColumn={{ sm: 'span4', md: 'span12' }}>
          <Text variant="h6" marginBottom={3}>
            {t('personalTab.pageTitle')}
          </Text>
          <Text variant="pMediumBold" marginBottom={4}>
            {t('personalTab.editableFieldsTitle')}
          </Text>
        </GridItem>
        <TitleAndNick customerId={customerId} customer={customerData?.customer} />
        <GridItem gridColumn={{ sm: 'span4', md: 'span12' }}>
          <Text variant="pMediumBold" marginTop={8} marginBottom={4}>
            {t('personalTab.nationalRegistryFieldsTitle')}
          </Text>
        </GridItem>
        <NationalRegistryFields customer={customerData?.customer} />
        <GridItem gridColumn={{ sm: 'span4', md: 'span12' }}>
          <Text variant="h6" marginTop={10} marginBottom={3}>
            {t('personalTab.emailSectionTitle')}
          </Text>
          <Text variant="pMediumBold" marginBottom={4}>
            {t('personalTab.emailFieldsTitle')}
          </Text>
        </GridItem>
        <ContactInformation
          customerId={customerId}
          customer={customerData?.customer}
          onRefetch={refetch}
        />
      </Grid>
    </Box>
  );
};