import React, { ReactNode } from 'react';
import { Box, IconButton, Menu, SideMenu, Text } from '@nova-hf/ui';
import { LinkProps } from '@nova-hf/ui/umd/ts/src/sidemenu/SideMenuLink';
import { inject, observer } from 'mobx-react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import Authentication from 'store/authentication';
import {
  useCustomerIdByNationalIdQuery,
  useMeQuery,
  useWalletCardsRegisteredQuery,
} from 'typings/graphql';
import { staffMenuLinksFirstLevel } from 'utils/staffMenuLinks';

const mainLinks = (ssn: string): Array<Omit<LinkProps, 'isStaffMenuOpen'>> => {
  const router = useRouter();
  const { data: contractCustomerData } = useCustomerIdByNationalIdQuery({
    variables: {
      input: {
        nationalId: router?.query?.ssn?.toString() ?? '',
      },
    },
    skip: !router?.query?.ssn,
  });
  const customerId = contractCustomerData?.customerByNationalId?.id;
  return [
    {
      id: 'services',
      icon: 'mobile',
      text: 'Þjónustur',
      color: 'pink',
      isLink: true,
      isActive: router?.pathname.includes('thjonustur') || router?.pathname.includes('thjonusta'),
      wrapper: (link: React.ReactNode) => (
        <Link href={`/${ssn}/thjonustur`} passHref legacyBehavior>
          {link}
        </Link>
      ),
    },
    {
      id: 'invoices',
      icon: 'creditcard',
      text: 'Reikningar',
      color: 'blue',
      isLink: true,
      isActive: router?.pathname.includes('reikningar'),
      wrapper: (link: React.ReactNode) => (
        <Link href={`/${ssn}/reikningar`} passHref legacyBehavior>
          {link}
        </Link>
      ),
    },
    {
      id: 'sagan',
      icon: 'selfie',
      text: 'Sagan',
      color: 'green',
      isLink: true,
      isActive: router?.pathname.includes('sagan'),
      onClick: () => (window.location.href = `/beta/${customerId}/sagan`),
    },
    {
      id: 'transactionList',
      icon: 'history',
      text: 'Hreyfingalisti',
      color: 'purple',
      isLink: true,
      isActive: router?.pathname.includes('hreyfingalisti'),
      wrapper: (link: React.ReactNode) => (
        <Link href={`/${ssn}/hreyfingalisti`} passHref legacyBehavior>
          {link}
        </Link>
      ),
    },
  ].filter(Boolean) as Array<Omit<LinkProps, 'isStaffMenuOpen'>>;
};
const secondaryLinks = (
  ssn: string,
  hasRegisteredCards: boolean,
  isCompany: boolean,
): Array<Omit<LinkProps, 'isStaffMenuOpen'>> => {
  const router = useRouter();

  const { data: contractCustomerData } = useCustomerIdByNationalIdQuery({
    variables: {
      input: {
        nationalId: router?.query?.ssn?.toString() ?? '',
      },
    },
    skip: !router?.query?.ssn,
  });
  const deildirLink: Omit<LinkProps, 'isStaffMenuOpen'> | null = isCompany
    ? {
        id: 'deildir',
        icon: 'company',
        text: 'Deildir',
        color: 'pink',
        isLink: true,
        isActive: router?.pathname.includes('deildir'),
        onClick: () =>
          (window.location.href = `/beta/${contractCustomerData?.customerByNationalId?.id}/deildir`),
      }
    : null;
  const tengilidirLink: Omit<LinkProps, 'isStaffMenuOpen'> | null = isCompany
    ? {
        id: 'contacts',
        icon: 'userCircle',
        text: 'Tengiliðir',
        color: 'pink',
        isLink: true,
        isActive: router?.pathname.includes('stillingar/tengilidir'),
        wrapper: (link) => (
          <Link href={`/${ssn}/stillingar/tengilidir`} passHref legacyBehavior>
            {link}
          </Link>
        ),
      }
    : null;
  const hradleidLink: Omit<LinkProps, 'isStaffMenuOpen'> | null = {
    id: 'hradleid',
    icon: 'transfer',
    text: 'Fjöldaaðgerðir',
    color: 'pink',
    isLink: false,
    isActive: router?.pathname.includes('fjoldaskraning'),
    wrapper: () => (
      <Menu
        color="pink"
        label="MultiLinkMenu"
        items={[
          {
            text: 'Ljósleiðari',
            onClick: () =>
              (window.location.href = `/beta/${contractCustomerData?.customerByNationalId?.id}/thjonustur`),
          },
          {
            text: 'Farsími',
            onClick: () => router.push(`/${ssn}/fjoldaskraning`),
          },
        ]}
        disclosure={
          <Box alignItems="center" display="flex" flexDirection="row" marginLeft={-1}>
            <IconButton color="grey600" icon="transfer" hiddenButtonText="More button" />
            <Text color="grey600" variant="eyebrowLarge">
              Fjöldaaðgerðir
            </Text>
          </Box>
        }
      />
    ),
  };

  const generalLinks: Array<Omit<LinkProps, 'isStaffMenuOpen'>> = [
    {
      id: 'repairs',
      icon: 'return',
      text: 'Viðgerðir',
      color: 'green',
      isLink: true,
      isActive: router?.pathname.includes('vidgerdir'),
      onClick: () => router.push(`/${ssn}/vidgerdir`),
    },
    {
      id: 'settings',
      icon: 'settings',
      text: 'Stillingar',
      color: 'pink',
      isLink: true,
      isActive: router?.pathname.includes('stillingar') && !router?.pathname.includes('tengilidir'),
      wrapper: (link: React.ReactNode) => (
        <Link href={`/${ssn}/stillingar`} passHref legacyBehavior>
          {link}
        </Link>
      ),
    },
    ...(tengilidirLink ? [tengilidirLink] : []),
    ...(hradleidLink ? [hradleidLink] : []),
    ...(deildirLink ? [deildirLink] : []),
  ].filter(Boolean) as Array<Omit<LinkProps, 'isStaffMenuOpen'>>;

  return hasRegisteredCards
    ? [
        {
          id: 'felagakort',
          icon: 'wallet',
          text: 'Félagakort',
          color: 'ocean',
          isLink: true,
          isActive: router?.pathname.includes('felagakort'),
          wrapper: (link) => (
            <Link href={`/${ssn}/felagakort/kort`} passHref legacyBehavior>
              {link}
            </Link>
          ),
        },
        ...generalLinks,
      ]
    : generalLinks;
};

type SideMenuContainerProps = {
  authentication: Authentication;
  children: ReactNode;
};

const SideMenuContainer = ({ authentication, children }: SideMenuContainerProps) => {
  const {
    username,
    accountInput: { ssn },
    isStaff,
  } = authentication;

  const { data: registeredCardsData, loading: registeredCardsLoading } =
    useWalletCardsRegisteredQuery({
      skip: isStaff,
    });

  const firstName = username?.split(' ')[0];

  const { data } = useMeQuery({
    variables: { accountInput: { ssn } },
  });

  const hasRegisteredCards: boolean =
    !registeredCardsLoading && !!registeredCardsData?.walletCardsRegistered?.registered?.length;

  const isCompany = !!data?.me?.userProfile?.isCompany;

  return (
    <Box
      position={{ sm: 'absolute', md: 'relative' }}
      marginTop={{ sm: 9, md: 0 }}
      style={{ zIndex: 2000, left: 0, right: 0, top: 0 }}
    >
      <SideMenu
        isStaff={isStaff}
        staffName={firstName}
        logo={{
          href: '/',
          wrapper: (link) => (
            <Link href={'/'} passHref legacyBehavior>
              {link}
            </Link>
          ),
        }}
        mainLinks={mainLinks(ssn)}
        secondaryLinks={secondaryLinks(ssn, hasRegisteredCards, isCompany, isStaff)}
        staffMenuLinks={staffMenuLinksFirstLevel(ssn)}
        {...(isStaff && { customerLabel: 'Viðskiptavinur' })}
        {...(isStaff &&
          data?.me && {
            customer: {
              name: data?.me.name ?? '',
              address:
                `${data?.me?.userProfile?.streetAddress}, ${data?.me?.userProfile?.postalCode} ${data?.me?.userProfile?.city}` ??
                '',
              email: data?.me.email ?? '',
              ssn: ssn,
            },
          })}
      >
        {children}
      </SideMenu>
    </Box>
  );
};

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