import React from 'react';
import { Box, Grid, GridItem, Text } from '@nova-hf/ui';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import Authentication from 'store/authentication';
import { useOrganizationQuery, usePersonQuery } from 'typings/graphql';
import { formatDate, isCompany, maritalStatusMap } from 'utils/helpers';

type NationalRegistryInfoProps = {
  authentication?: Authentication;
};

const NationalRegistryInfo = ({ authentication }: NationalRegistryInfoProps) => {
  const router = useRouter();
  const nationalId = router?.query?.ssn?.toString();
  const company = isCompany(nationalId ?? '');
  const { data } = usePersonQuery({
    variables: { input: { nationalId }, skip: company },
  });

  const { data: organizationData } = useOrganizationQuery({
    variables: { input: { nationalId }, skip: !company },
  });

  if (authentication?.isStaff) {
    return (
      <Box marginY={8}>
        <Text variant="h6">Úr þjóðskrá</Text>
        <Text>Fleiri upplýsingar úr þjóðskrá.</Text>
        <Box marginTop={3}>
          {!company ? (
            <Grid gridTemplate={{ sm: 8, md: 12 }}>
              {data?.person?.dateOfBirth && (
                <GridItem gridColumn={{ sm: 'span4', md: 'span4' }}>
                  <Box
                    display="flex"
                    flexDirection="column"
                    gap={1}
                    borderBottomStyle="solid"
                    borderColor="grey700"
                    borderWidth="1px"
                  >
                    <Text variant="pSmallBold">Afmælisdagur:</Text>
                    <Text variant="pSmallRegular">
                      {formatDate(data?.person?.dateOfBirth, 'dd.MM.yyyy')}
                    </Text>
                  </Box>
                </GridItem>
              )}
              {data?.person?.familyRegistrationCode && (
                <GridItem gridColumn={{ sm: 'span4', md: 'span4' }}>
                  <Box
                    display="flex"
                    flexDirection="column"
                    gap={1}
                    borderBottomStyle="solid"
                    borderColor="grey700"
                    borderWidth="1px"
                  >
                    <Text variant="pSmallBold">Fjölskyldunúmer:</Text>
                    <Text variant="pSmallRegular">{data?.person?.familyRegistrationCode}</Text>
                  </Box>
                </GridItem>
              )}
              {data?.person?.guardianNationalId && (
                <GridItem gridColumn={{ sm: 'span4', md: 'span4' }}>
                  <Box
                    display="flex"
                    flexDirection="column"
                    gap={1}
                    borderBottomStyle="solid"
                    borderColor="grey700"
                    borderWidth="1px"
                  >
                    <Text variant="pSmallBold">Kennitala forráðarmanns:</Text>
                    <Text variant="pSmallRegular">{data?.person?.guardianNationalId}</Text>
                  </Box>
                </GridItem>
              )}
              {data?.person?.spouseNationalId && (
                <GridItem gridColumn={{ sm: 'span4', md: 'span4' }}>
                  <Box
                    display="flex"
                    flexDirection="column"
                    gap={1}
                    borderBottomStyle="solid"
                    borderColor="grey700"
                    borderWidth="1px"
                  >
                    <Text variant="pSmallBold">Kennitala maka:</Text>
                    <Text variant="pSmallRegular">{data?.person?.spouseNationalId}</Text>
                  </Box>
                </GridItem>
              )}
              {data?.person?.maritalStatus && (
                <GridItem gridColumn={{ sm: 'span4', md: 'span4' }}>
                  <Box
                    display="flex"
                    flexDirection="column"
                    gap={1}
                    borderBottomStyle="solid"
                    borderColor="grey700"
                    borderWidth="1px"
                  >
                    <Text variant="pSmallBold">Hjúskaparstaða:</Text>
                    <Text variant="pSmallRegular">
                      {maritalStatusMap(data?.person?.maritalStatus)}
                    </Text>
                  </Box>
                </GridItem>
              )}
              {data?.person?.country && (
                <GridItem gridColumn={{ sm: 'span4', md: 'span4' }}>
                  <Box
                    display="flex"
                    flexDirection="column"
                    gap={1}
                    borderBottomStyle="solid"
                    borderColor="grey700"
                    borderWidth="1px"
                  >
                    <Text variant="pSmallBold">Land:</Text>
                    <Text variant="pSmallRegular">{data?.person?.country}</Text>
                  </Box>
                </GridItem>
              )}
            </Grid>
          ) : (
            <Grid gridTemplate={{ sm: 8, md: 12 }}>
              {organizationData?.organization?.address && (
                <GridItem gridColumn={{ sm: 'span4', md: 'span4' }}>
                  <Box
                    display="flex"
                    flexDirection="column"
                    gap={1}
                    borderBottomStyle="solid"
                    borderColor="grey700"
                    borderWidth="1px"
                  >
                    <Text variant="pSmallBold">Heimilisfang:</Text>
                    <Text variant="pSmallRegular">{organizationData?.organization?.address}</Text>
                  </Box>
                </GridItem>
              )}
              {organizationData?.organization?.chairmanNationalId && (
                <GridItem gridColumn={{ sm: 'span4', md: 'span4' }}>
                  <Box
                    display="flex"
                    flexDirection="column"
                    gap={1}
                    borderBottomStyle="solid"
                    borderColor="grey700"
                    borderWidth="1px"
                  >
                    <Text variant="pSmallBold">Kennitala stjórnarformanns:</Text>
                    <Text variant="pSmallRegular">
                      {organizationData?.organization?.chairmanNationalId}
                    </Text>
                  </Box>
                </GridItem>
              )}
              {organizationData?.organization?.country && (
                <GridItem gridColumn={{ sm: 'span4', md: 'span4' }}>
                  <Box
                    display="flex"
                    flexDirection="column"
                    gap={1}
                    borderBottomStyle="solid"
                    borderColor="grey700"
                    borderWidth="1px"
                  >
                    <Text variant="pSmallBold">Land:</Text>
                    <Text variant="pSmallRegular">{organizationData?.organization?.country}</Text>
                  </Box>
                </GridItem>
              )}
              {organizationData?.organization?.industryCode && (
                <GridItem gridColumn={{ sm: 'span4', md: 'span4' }}>
                  <Box
                    display="flex"
                    flexDirection="column"
                    gap={1}
                    borderBottomStyle="solid"
                    borderColor="grey700"
                    borderWidth="1px"
                  >
                    <Text variant="pSmallBold">Iðnaðarkóði:</Text>
                    <Text variant="pSmallRegular">
                      {organizationData?.organization?.industryCode}
                    </Text>
                  </Box>
                </GridItem>
              )}
              {organizationData?.organization?.organizationType && (
                <GridItem gridColumn={{ sm: 'span4', md: 'span4' }}>
                  <Box
                    display="flex"
                    flexDirection="column"
                    gap={1}
                    borderBottomStyle="solid"
                    borderColor="grey700"
                    borderWidth="1px"
                  >
                    <Text variant="pSmallBold">Tegund:</Text>
                    <Text variant="pSmallRegular">
                      {organizationData?.organization?.organizationType}
                    </Text>
                  </Box>
                </GridItem>
              )}
              {organizationData?.organization?.registrationDate && (
                <GridItem gridColumn={{ sm: 'span4', md: 'span4' }}>
                  <Box
                    display="flex"
                    flexDirection="column"
                    gap={1}
                    borderBottomStyle="solid"
                    borderColor="grey700"
                    borderWidth="1px"
                  >
                    <Text variant="pSmallBold">Skráð:</Text>
                    <Text variant="pSmallRegular">
                      {formatDate(organizationData?.organization?.registrationDate, 'dd.MM.yyyy')}
                    </Text>
                  </Box>
                </GridItem>
              )}
            </Grid>
          )}
        </Box>
      </Box>
    );
  }
  return null;
};

export default inject('authentication')(observer(NationalRegistryInfo));