import React from 'react';
import { Box, Grid, GridItem, NotificationBanner } from '@nova-hf/ui';
import SideMenuLayout from 'beta/components/layouts/SideMenuLayout';
import { Dancefloor } from 'beta/containers/dancefloor/Dancefloor';
import EmailNotificationBanner from 'beta/containers/email-notification/EmailNotificationBanner';
import { Opportunities } from 'beta/containers/opportunities/Opportunities';
import { ShortCuts } from 'beta/containers/shortcuts/ShortCuts';
import { YourServices } from 'beta/containers/your-services/YourServices';
import { IContext } from 'beta/typings/context';
import { useRouter } from 'next/router';
import {
  useContractGroupsCountQuery,
  useCustomerNameQuery,
  useCustomerVerifiedFieldsQuery,
  useTitleListQuery,
} from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

const Yfirlit = () => {
  const router = useRouter();
  const { t, i18n } = useTranslation('containers');
  const customerId = (router.query.customerId as string) ?? '';

  const { data: titleData, loading: titlesLoading } = useTitleListQuery({
    variables: {
      locale: i18n.language,
    },
  });

  const { data, loading, error } = useCustomerNameQuery({
    variables: {
      input: {
        id: customerId,
      },
    },
    skip: !customerId,
  });

  const { data: dataContracts } = useContractGroupsCountQuery({
    variables: {
      input: {
        customerId: (router.query.customerId as string) ?? '',
      },
    },
  });

  const { data: emailVerifiedData, loading: loadingIsEmailVerified } =
    useCustomerVerifiedFieldsQuery({
      variables: {
        input: {
          id: customerId,
        },
      },
      fetchPolicy: 'cache-and-network',
      skip: !customerId,
    });

  if (error) return null;

  const contentfulTitle = titleData?.titleList?.titlesCollection?.items.find(
    (title) => title?.id === data?.customer?.title,
  );

  const heroTitle = `${contentfulTitle?.title || 'DJ'} ${
    data?.customer?.nickname || data?.customer?.name
  }`;

  const hasContractGroups = !!dataContracts?.contractGroups?.length;

  return (
    <SideMenuLayout color="pink" title={loading || titlesLoading ? '...' : heroTitle}>
      <Box marginTop={[-5, -18]}>
        <ShortCuts />
      </Box>
      {loadingIsEmailVerified && hasContractGroups && (
        <Box marginTop={[4, 10]}>
          <EmailNotificationBanner
            customerEmail={data?.customer?.email ?? ''}
            isEmailVerified={!!emailVerifiedData?.customer?.isEmailVerified}
            hasAlertPing
          />
        </Box>
      )}
      {!hasContractGroups && (
        <Box marginTop={[4, 10]}>
          <NotificationBanner
            title={t('yfirlitOpportunities.noContractTitle')}
            icon="happy"
            mainButtonColored={{
              icon: 'longArrowRight',
              text: t('yfirlitOpportunities.noContractButtontText'),
              renderAs: 'a',
              href: 'https://www.nova.is/farsimi/komdu/1',
              openInNewTab: true,
            }}
            eyebrowText={t('yfirlitOpportunities.noContractEyebrow')}
          />
        </Box>
      )}
      <Grid gridTemplate={{ sm: 4, md: 12 }}>
        {hasContractGroups && (
          <GridItem gridColumn={{ sm: 'span4', md: 'span8' }}>
            <Box marginTop={[4, 10]}>
              <YourServices />
            </Box>
          </GridItem>
        )}
        <GridItem
          gridColumn={{
            sm: 'span4',
            md: dataContracts?.contractGroups?.length ? 'span4' : 'span12',
          }}
        >
          <Box marginTop={[4, 10]}>
            <Opportunities isAccordion={hasContractGroups} />
          </Box>
          <Box marginTop={[4, 8]}>
            <Dancefloor isAccordion={hasContractGroups} />
          </Box>
        </GridItem>
      </Grid>
    </SideMenuLayout>
  );
};

Yfirlit.getInitialProps = ({ pathname, query }: IContext) => {
  return {
    pathname,
    customerId: query.customerId,
    namespacesRequired: ['containers'],
  };
};

export default Yfirlit;