import React, { useEffect, useState } from 'react';
import { Controller, useForm } from 'react-hook-form';
import {
  BaseButton,
  Box,
  Empty,
  Icon,
  MainButton,
  SecondaryButton,
  Select,
  Text,
  useViewport,
} from '@nova-hf/ui';
import { isMobileServiceRequest, isSignupContract } from 'beta/utils/typeGuards';
import { Button, InputMessage, InputWrapper, TextInput, Upsell } from 'frisco';
import BaseWrapper from 'frisco/BaseWrapper/BaseWrapper';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import { useSnackbar } from 'notistack';
import Authentication from 'store/authentication';
import Cart from 'store/cart';
import MobileSignup from 'store/mobileSignup';
import { SignupSteps } from 'store/signupSteps';
import UI from 'store/ui';
import { IDepartment } from 'typings';
import { IContext } from 'typings/context';
import {
  CartItem,
  Maybe,
  ServiceRequest,
  useAddCustomerMutation,
  useCustomerLazyQuery,
  useCustomerNameByNationalIdLazyQuery,
  useDepartmentsQuery,
  useMobileCartQuery,
  useRemoveFromCartMutation,
  UserInfoInput,
} from 'typings/graphql';
import { formatPrice, isEighteenOrOlder } from 'utils/helpers';

import LayoutWrapper from '../components/LayoutWrapper';
import ReferenceCheckBox from '../components/ReferenceCheckBox';
import UserText from '../components/UserText';
import { YfirlitHeader } from '../components/YfirlitHeader';

type CartItemsReturn = {
  price?: number;
  title?: string;
  subtitle?: string;
  label?: string;
  isSubscription: boolean;
};

export const mapCartItemForYfirlit = (cartItems: CartItem[]): (CartItemsReturn | undefined)[] => {
  const returnItems: (CartItemsReturn | undefined)[] = cartItems
    .filter((item) => item.variantId !== 'simanumer-netnumer')
    .map((item, index, array) => {
      if (index === 0) {
        const title = `${item.title}: ${array[1].title}`;
        const isSubscription = !!array[1].subscriptionFee;
        return {
          price: isSubscription ? array[1].subscriptionFee : array[1].price,
          title: 'Farsími',
          subtitle: title,
          label: isSubscription ? '/mán' : '',
          isSubscription,
        } as CartItemsReturn;
      } else {
        const isSubscription = !!item.subscriptionFee;
        return {
          price: isSubscription ? item.subscriptionFee : item.price,
          title: item.title ?? '',
          subtitle: item.variantId.includes('e-sim') ? 'Þú ákveður virkjunartíma eftir kaup' : '',
          label: isSubscription ? '/mán' : '',
          isSubscription,
        };
      }
    });
  return returnItems.sort((a, b) => {
    return a?.isSubscription === b?.isSubscription ? 0 : a?.isSubscription ? -1 : 1;
  });
};

type YfirlitProps = {
  mobileSignup: MobileSignup;
  cart: Cart;
  ui: UI;
  signupSteps?: SignupSteps;
  authentication: Authentication;
};

const Yfirlit = ({ mobileSignup, cart, authentication, ui, signupSteps }: YfirlitProps) => {
  const router = useRouter();
  const { isSmall } = useViewport();
  const { enqueueSnackbar } = useSnackbar();
  const isMobile = isSmall;
  const isCompany = mobileSignup?.isCompany;
  const customerId = authentication?.isStaff ? cart?.customerId : authentication?.customerId;
  const nationalId = authentication?.loggedInUserSsn;
  const [userOtherThanPayer, setUserOtherThanPayer] = useState<string[]>([]);
  const [error, setError] = useState('');
  const [userData, setUserData] = useState<{
    [key: string]: {
      nationalId: string;
      email: string;
      touched: { nationalId: boolean; email: boolean };
      isChangingRightHolder: boolean;
    };
  }>({});
  const cartId = '7e7738ba-59a1-473a-5f4f-08dd9858db67';
  const { data: cartData, refetch: cartRefetch } = useMobileCartQuery({
    variables: { input: { cartId: cartId } },
  });
  const { data: companyDepartmentsData, refetch: departmentRefetch } = useDepartmentsQuery({
    variables: {
      accountInput: {
        ssn: cart?.nationalId,
      },
      servicesRequired: false,
    },
    skip: !isCompany,
  });
  const { control, handleSubmit, watch } = useForm({
    defaultValues: {
      department: '',
      ceiling: '',
      skyring: '',
    },
  });
  const { department, ceiling, skyring } = watch();
  const usedDepartments = companyDepartmentsData?.me?.departments as [IDepartment];
  const [getCustomerInfo, { loading: loadingCustomerInfo }] =
    useCustomerNameByNationalIdLazyQuery();
  const [getContact] = useCustomerLazyQuery({
    onCompleted(data) {
      if (data) {
        cartRefetch();
      }
    },
  });
  const [addCustomer, { loading: loadingAddCustomer }] = useAddCustomerMutation({
    onCompleted(data) {
      if (data) {
        cartRefetch();
      }
    },
  });
  const [removeFromCart, { loading: loadingRemoveFromCart }] = useRemoveFromCartMutation({
    onCompleted(data) {
      if (data) {
        if (!data.removeFromCart.cart?.items.length) {
          mobileSignup.reset();
          router.push('/farsimi/kaupa');
        } else {
          cartRefetch();
        }
      }
    },
    onError(error) {
      if (error) {
        enqueueSnackbar('Ekki tókst að taka númer úr körfu:' + '' + error.message, {
          variant: 'success',
        });
      }
    },
  });
  const cartItems = cartData?.cart?.items;

  const validateNationalId = (id: string) => /^[0-9]{10}$/.test(id);
  const validateEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

  const groupCartItems = () => {
    const groupedItems = [] as CartItem[][];
    const processed = new Set();

    cartItems?.forEach((rootItem) => {
      if (
        !rootItem?.purchaseInfo?.contract &&
        !rootItem?.purchaseInfo?.serviceCartItemId &&
        !processed.has(rootItem.id)
      ) {
        const group = [rootItem];

        processed.add(rootItem.id);

        const queue = [rootItem];

        while (queue.length > 0) {
          const current = queue.shift();

          cartItems.forEach((item) => {
            if (!processed.has(item.id)) {
              if (
                (isSignupContract(item?.purchaseInfo?.contract) &&
                  item?.purchaseInfo?.contract?.cartItemId === current?.id) ||
                item?.purchaseInfo?.serviceCartItemId === current?.id
              ) {
                group.push(item);
                processed.add(item.id);
                queue.push(item);
              }
            }
          });
        }

        groupedItems?.push(group as CartItem[]);
      }
    });

    return groupedItems;
  };

  const cartItemGroups = groupCartItems();

  const makeContact = async (cartItemId?: string) => {
    if (customerId) {
      if (!cartData?.cart?.contact) {
        let defaultPhoneNumber = '';
        const { data } = await getContact({
          variables: { input: { id: customerId } },
        });
        let newPrimaryPhoneNumber;
        if (!data?.customer?.primaryPhoneNumber && data?.customer?.nationalId) {
          newPrimaryPhoneNumber = await mobileSignup.getPortInNumberFromPayer(
            data?.customer?.nationalId,
          );
        }
        if (cartItemId) {
          const serviceCartItem = await mobileSignup.findServiceItem(cartItemId);
          if (
            serviceCartItem?.purchaseInfo?.service?.__typename === 'MobileServiceRequest' &&
            serviceCartItem.purchaseInfo.service.phoneNumber
          ) {
            defaultPhoneNumber = serviceCartItem?.purchaseInfo?.service.phoneNumber;
          }
        }

        const phoneNumber = data?.customer?.primaryPhoneNumber
          ? data?.customer?.primaryPhoneNumber
          : typeof newPrimaryPhoneNumber === 'string' && !newPrimaryPhoneNumber.length
          ? newPrimaryPhoneNumber
          : defaultPhoneNumber;

        const contact = {
          email: data?.customer?.email ?? '',
          msisdn: phoneNumber,
          ssn: data?.customer?.nationalId ?? '',
          name: data?.customer?.name ?? '',
          address: data?.customer?.legalEntity?.address ?? '',
          zip: data?.customer?.legalEntity?.postCode ?? '',
        };
        if (cartItemId) {
          await updateUserInfo(cartItemId, contact?.email, contact?.ssn);
        }
        if ((!cartItemId && !mobileSignup?.isOskrad) || !cartData?.cart?.contact) {
          await mobileSignup?.addContactToCart(contact);
        }
      }
    }
    if (!customerId && !mobileSignup.isOskrad) {
      if (!cartData?.cart?.contact) {
        try {
          const { data } = await addCustomer({
            variables: {
              input: {
                nationalId: nationalId ?? '',
              },
            },
          });
          let defaultPhoneNumber = '';
          if (cartItemId) {
            const serviceCartItem = await mobileSignup.findServiceItem(cartItemId);
            if (
              serviceCartItem?.purchaseInfo?.service?.__typename === 'MobileServiceRequest' &&
              serviceCartItem.purchaseInfo.service.phoneNumber
            ) {
              defaultPhoneNumber = serviceCartItem?.purchaseInfo?.service.phoneNumber;
            }
          }
          const contact = {
            email: data?.addCustomer?.customer?.email ?? '',
            msisdn: data?.addCustomer?.customer?.primaryPhoneNumber ?? defaultPhoneNumber ?? '',
            ssn: data?.addCustomer?.customer?.nationalId ?? '',
            name: data?.addCustomer?.customer?.name ?? '',
            address: data?.addCustomer?.customer?.legalEntity?.address ?? '',
            zip: data?.addCustomer?.customer?.legalEntity?.postCode ?? '',
          };
          if (cartItemId) {
            await updateUserInfo(cartItemId, contact?.email, contact?.ssn);
          }
          if (!cartItemId && !mobileSignup?.isOskrad) {
            mobileSignup?.addContactToCart(contact);
          }
        } catch (error) {
          if (error instanceof Error) {
            setError(error.message);
          }
        }
      }
    }
  };

  const updateUserInfo = async (cartItemId: string, email: string, nationalId: string) => {
    const { data } = await getCustomerInfo({
      variables: { input: { nationalId: nationalId } },
    });
    const customerId = data?.customerByNationalId?.id;
    const name = data?.customerByNationalId?.name;
    const phoneNumber = data?.customerByNationalId?.primaryPhoneNumber;
    if (!customerId) {
      try {
        const { data } = await addCustomer({
          variables: {
            input: {
              nationalId: nationalId,
              email: email,
            },
          },
        });
        const user = {
          email: email,
          nationalId: nationalId,
          customerId: data?.addCustomer?.customer?.id,
          name: name,
        };
        mobileSignup?.updateUserInfo(user, cartItemId);
        if (department || skyring || !!ceiling) {
          const companyInfo = {
            departmentId: department,
            invoiceExplanation: skyring,
            contractExtraPayerInfo: {
              customerId: data?.addCustomer?.customer?.id,
              amount: Number(ceiling) > 0 ? Number(ceiling) : null,
            },
          };
          mobileSignup?.updateCompanyInfo(companyInfo, cartItemId);
        }
      } catch (error) {
        if (error instanceof Error) {
          setError(error.message);
        }
      }
    }
    if (customerId) {
      if (department || skyring || !!ceiling) {
        const companyInfo = {
          departmentId: department,
          invoiceExplanation: skyring,
          contractExtraPayerInfo: {
            customerId: customerId,
            amount: Number(ceiling),
          },
        };
        mobileSignup?.updateCompanyInfo(companyInfo, cartItemId);
      }
      const user: UserInfoInput = {
        email: email,
        nationalId: nationalId,
        customerId: customerId,
        name: name,
        phoneNumber,
      };
      mobileSignup?.updateUserInfo(user, cartItemId);
    }
  };

  const doesntHavePlasticSimCard = () => {
    signupSteps?.markStepComplete('afhendingarmatar');
    router.push('/farsimi/greidsla');
  };

  const onSubmit = async () => {
    cartItemGroups?.map(async (group) => {
      const referenceItem = group.find(
        (item) => item?.purchaseInfo?.contract && 'cartItemId' in item.purchaseInfo.contract,
      );
      if (referenceItem?.id) {
        const user = userData[referenceItem?.id];
        if (user?.nationalId !== cartData?.cart?.contact?.ssn) {
          const cartItemId =
            isSignupContract(referenceItem?.purchaseInfo?.contract) &&
            referenceItem?.purchaseInfo?.contract?.cartItemId;
          const contact = cartData?.cart?.contact;
          if (!user?.nationalId && contact?.email && contact.ssn && cartItemId) {
            await updateUserInfo(cartItemId, contact.email, contact.ssn);
          } else if (cartItemId) {
            await updateUserInfo(cartItemId, user?.email, user?.nationalId);
          }
        }
        if (user?.nationalId === cartData?.cart?.contact?.ssn) {
          // this goes if untouched
          const isFlutningur =
            isMobileServiceRequest(referenceItem?.purchaseInfo?.service) &&
            !referenceItem?.purchaseInfo?.service?.isNewNumber;
          const cartItemId =
            isSignupContract(referenceItem?.purchaseInfo?.contract) &&
            referenceItem?.purchaseInfo?.contract?.cartItemId;
          if (cartItemId && !isFlutningur) {
            await makeContact(cartItemId); //just use the logged in user on the cartItemId if nationalId is not changed
          }
          if (cartItemId && isFlutningur) {
            const rightHolder =
              isMobileServiceRequest(referenceItem?.purchaseInfo?.service) &&
              referenceItem?.purchaseInfo?.service?.mobileSignupRightHolder;
            if (rightHolder && rightHolder?.nationalId && rightHolder?.email) {
              await updateUserInfo(cartItemId, rightHolder?.nationalId, rightHolder?.email);
            }
            await makeContact(cartItemId); //just use the logged in user on the cartItemId if nationalId is not changed
          }
        }
      }
    });
    signupSteps?.markStepComplete('karfa');
    if (signupSteps?.nextStepId) signupSteps.setCurrentStep(signupSteps.nextStepId);
    const hasPlastic = await mobileSignup.hasPlasticSimCard();
    mobileSignup?.isOskrad
      ? router?.push('/farsimi/greidsla-oskrad/')
      : hasPlastic && !authentication.staffInStore
      ? router?.push('/farsimi/afhendingarmatar/')
      : doesntHavePlasticSimCard();
  };

  const handleCheckboxChange = (referenceItem: string) => {
    setUserOtherThanPayer((prev) =>
      prev.includes(referenceItem)
        ? prev.filter((id) => id !== referenceItem)
        : [...prev, referenceItem],
    );
  };

  const handleNationalIdChange = async (id: string, value: string) => {
    let isChangingRightHolder = false;
    if (value?.length > 8) {
      const rightHolderNationalId = await mobileSignup.getRightHolder(id);
      isChangingRightHolder = rightHolderNationalId ? rightHolderNationalId !== value : false;
    }
    setUserData((prev) => ({
      ...prev,
      [id]: {
        ...(prev[id] || {
          nationalId: '',
          email: '',
          touched: { nationalId: false, email: false },
          isChangingRightHolder: isChangingRightHolder,
        }),
        nationalId: value,
      },
    }));
  };

  const handleEmailChange = (id: string, value: string) => {
    setUserData((prev) => ({
      ...prev,
      [id]: {
        ...(prev[id] || {
          nationalId: '',
          email: '',
          touched: { nationalId: false, email: false },
          isChangingRightHolder: false,
        }),
        email: value,
      },
    }));
  };

  const handleTouched = (id: string, field: 'nationalId' | 'email') => {
    setUserData((prev) => ({
      ...prev,
      [id]: {
        ...(prev[id] || {
          nationalId: '',
          email: '',
          touched: { nationalId: false, email: false },
          isChangingRightHolder: false,
        }),
        touched: { ...prev[id]?.touched, [field]: true },
      },
    }));
  };

  const onRemoveClick = async (group: CartItem[]) => {
    for (const item of group) {
      await removeFromCart({
        variables: {
          input: {
            cartId: cartId,
            itemId: item?.id,
          },
        },
      });
    }
  };

  const hasAnySlideErrors =
    cartItemGroups?.some((group) => {
      const referenceItem = group.find(
        (item) => item?.purchaseInfo?.contract && 'cartItemId' in item.purchaseInfo.contract,
      );

      if (!referenceItem) return false;

      const id = referenceItem.id;
      const data = userData[id] ?? {};
      const nationalId = data.nationalId ?? '';
      const email = data.email ?? '';
      const isTouchedNationalId = data.touched?.nationalId;
      const isTouchedEmail = data.touched?.email;
      const isMinusEighteen = referenceItem?.variantId?.includes('minus');
      const isChosenButEmpty =
        (userOtherThanPayer.includes(referenceItem?.id ?? '') && !nationalId) ||
        (userOtherThanPayer.includes(referenceItem?.id ?? '') && !email);

      return (
        (isTouchedNationalId && !validateNationalId(nationalId)) ||
        (isMinusEighteen && isEighteenOrOlder(nationalId)) ||
        (isTouchedEmail && !validateEmail(email)) ||
        isChosenButEmpty
      );
    }) ?? false;

  useEffect(() => {
    ui?.setIsHiddenFooter(true);
    if (!mobileSignup?.isOskrad) {
      makeContact().then(() => {
        cartRefetch();
      });
    }
  }, []);

  useEffect(() => {
    departmentRefetch();
  }, [cartData?.cart?.contact?.ssn]);

  return (
    <LayoutWrapper image="https://images.ctfassets.net/j5d5y4z9f7ki/6SLLU2ZO3jslYqnQEHP1Jl/616bd9056bd7e50cfd21b4a4079f2166/c356f2a9aca04ad08870d0f949d96d16bbefff8c.jpg">
      {cart.activeCartId ? (
        <Box marginBottom={10}>
          <Box marginTop={20}>
            <Box marginBottom={3}>
              <Text variant="h6">Karfan</Text>
              <Text variant="pMediumRegular" color="grey500">
                Var það eitthvað fleira?
              </Text>
            </Box>
            {cartItemGroups && (
              <Box>
                {cartItemGroups?.map((group, index) => {
                  const referenceItem = group.find(
                    (item) =>
                      item?.purchaseInfo?.contract && 'cartItemId' in item.purchaseInfo.contract,
                  );
                  const isFlutningur =
                    isMobileServiceRequest(referenceItem?.purchaseInfo?.service) &&
                    !referenceItem?.purchaseInfo?.service?.isNewNumber;

                  const isMinusEighteen = referenceItem?.variantId?.includes('minus') ?? false;
                  const hasPhoneNumber = (service: Maybe<ServiceRequest> | undefined) =>
                    !!service && 'phoneNumber' in service;

                  const phoneNumber = hasPhoneNumber(referenceItem?.purchaseInfo?.service)
                    ? referenceItem?.purchaseInfo?.service?.phoneNumber
                    : '';

                  const contractId =
                    isSignupContract(referenceItem?.purchaseInfo?.contract) &&
                    referenceItem?.purchaseInfo?.contract.cartItemId;

                  const renderItems = mapCartItemForYfirlit(group);

                  return (
                    <BaseWrapper key={index} hasBackground={false}>
                      <Box marginBottom={1} display="flex" flexDirection="column" gap={{ lg: 2 }}>
                        <Box
                          display="flex"
                          flexDirection={{ sm: 'column' }}
                          alignItems="flex-start"
                          justifyContent={{ sm: 'space-between', lg: 'flex-start' }}
                          width="100%"
                          marginY={{ sm: 0, lg: 2 }}
                        >
                          <YfirlitHeader
                            phoneNumber={phoneNumber}
                            onEditClick={() => {
                              if (contractId) {
                                mobileSignup.fillPurchaseInfo(contractId);
                                mobileSignup?.setUpdatingCartItemId(contractId);
                              }
                              router.push('/farsimi/kaupa?step=viltu-pakka');
                            }}
                            onTrashClick={() => onRemoveClick(group)}
                          />
                          <Box height={4}>
                            {!userOtherThanPayer.includes(referenceItem?.id ?? '') && (
                              <Box paddingLeft={{ lg: 2 }}>
                                {!mobileSignup?.isOskrad ? (
                                  <Box gap={1} display="flex" flexDirection="column">
                                    <Text color="grey500" variant="pMediumRegular">
                                      <UserText cartItem={referenceItem?.id} />
                                    </Text>
                                  </Box>
                                ) : (
                                  <Text color="grey500" variant="pMediumRegular">
                                    Óskráð frelsi
                                  </Text>
                                )}
                              </Box>
                            )}
                          </Box>
                          <Box className={'force-width'}>
                            {!mobileSignup?.isOskrad && (
                              <Box width="fitContent" paddingLeft={{ lg: 2 }}>
                                <ReferenceCheckBox
                                  key={index}
                                  referenceItemId={referenceItem?.id ?? ''}
                                  isMinusEighteen={isMinusEighteen}
                                  userOtherThanPayer={userOtherThanPayer}
                                  handleCheckboxChange={handleCheckboxChange}
                                  isFlutningur={isFlutningur}
                                />
                              </Box>
                            )}
                            {userOtherThanPayer.includes(referenceItem?.id ?? '') && (
                              <Box display="flex" flexDirection="column" marginTop={2} gap={2}>
                                <InputWrapper
                                  input={
                                    <TextInput
                                      id={`nationalId-${referenceItem?.id}`}
                                      name="Kennitala"
                                      onChange={(e) =>
                                        handleNationalIdChange(
                                          referenceItem?.id ?? '',
                                          e.target.value,
                                        )
                                      }
                                      onBlur={() =>
                                        handleTouched(referenceItem?.id ?? '', 'nationalId')
                                      }
                                      placeholder="kennitala"
                                      value={userData[referenceItem?.id ?? '']?.nationalId || ''}
                                      autoComplete="national-id"
                                      required
                                      backgroundColor="grey100"
                                      textColor="black100"
                                    />
                                  }
                                  slideComponent={(() => {
                                    const data = userData[referenceItem?.id ?? ''];
                                    const nationalId = data?.nationalId ?? '';
                                    const isTouched = data?.touched.nationalId;
                                    const isChangingRightHolder = data?.isChangingRightHolder;

                                    if (isTouched && !validateNationalId(nationalId)) {
                                      return (
                                        <InputMessage
                                          status="Error"
                                          text="Kennitala þarf að vera 10 tölustafir."
                                        />
                                      );
                                    } else if (
                                      isTouched &&
                                      isMinusEighteen &&
                                      isEighteenOrOlder(nationalId)
                                    ) {
                                      return (
                                        <InputMessage
                                          status="Error"
                                          text="Einstaklingur of gamall fyrir -18."
                                        />
                                      );
                                    } else if (isChangingRightHolder) {
                                      return (
                                        <InputMessage
                                          status="Success"
                                          text="Rétthafabreyting mun eiga sér stað þar sem notandi er ekki rétthafi númers, breytingin tekur gildi eftir 30 daga."
                                        />
                                      );
                                    }

                                    return null;
                                  })()}
                                  slideActive={(() => {
                                    const data = userData[referenceItem?.id ?? ''];
                                    const nationalId = data?.nationalId ?? '';
                                    const isTouched = data?.touched.nationalId;
                                    const isChangingRightHolder = data?.isChangingRightHolder;

                                    return (
                                      isTouched &&
                                      (!validateNationalId(nationalId) ||
                                        (isEighteenOrOlder(nationalId) && isMinusEighteen) ||
                                        isChangingRightHolder)
                                    );
                                  })()}
                                />
                                <InputWrapper
                                  input={
                                    <TextInput
                                      id={`email-${referenceItem?.id}`}
                                      name="Netfang"
                                      onChange={(e) =>
                                        handleEmailChange(referenceItem?.id ?? '', e.target.value)
                                      }
                                      onBlur={() => handleTouched(referenceItem?.id ?? '', 'email')}
                                      placeholder="netfang"
                                      value={userData[referenceItem?.id ?? '']?.email || ''}
                                      autoComplete="email"
                                      required
                                      backgroundColor="grey100"
                                      textColor="black100"
                                    />
                                  }
                                  slideComponent={
                                    userData[referenceItem?.id ?? '']?.touched.email &&
                                    !validateEmail(
                                      userData[referenceItem?.id ?? '']?.email ?? '',
                                    ) ? (
                                      <InputMessage
                                        status="Error"
                                        text={'Vinsamlegast sláðu inn gilt netfang.'}
                                      />
                                    ) : null
                                  }
                                  slideActive={
                                    userData[referenceItem?.id ?? '']?.touched.email &&
                                    !validateEmail(userData[referenceItem?.id ?? '']?.email ?? '')
                                  }
                                />
                              </Box>
                            )}
                          </Box>
                        </Box>
                        <Box marginY={{ sm: 1, lg: 0 }} width="100%">
                          {renderItems?.map((item, index) => {
                            if (index === 1) return null;
                            return (
                              <Box
                                key={item?.title}
                                display="flex"
                                flexDirection={'column'}
                                alignItems="space-between"
                                justifyContent="center"
                                borderTopStyle={{ sm: 'solid' }}
                                borderColor={'grey200'}
                                borderWidth={'1px'}
                                paddingX={1}
                                paddingY={3}
                                width={{ lg: '100%' }}
                              >
                                <Box
                                  display="flex"
                                  justifyContent="space-between"
                                  alignItems="center"
                                >
                                  <Text variant={'pMediumBold'} color={'pink'}>
                                    {item?.title}
                                  </Text>
                                  {item?.price !== 0 && (
                                    <Box display="flex">
                                      <Text variant="pMediumBold">
                                        {formatPrice(item?.price ?? 0)}
                                      </Text>
                                      <Text variant="pMediumRegular" color="grey500">
                                        {item?.label}
                                      </Text>
                                    </Box>
                                  )}
                                </Box>
                                <Box display={'flex'}>{item?.subtitle}</Box>
                              </Box>
                            );
                          })}
                          {isCompany && userOtherThanPayer.includes(referenceItem?.id ?? '') && (
                            <form onSubmit={handleSubmit(onSubmit)}>
                              <Box display="flex" flexDirection="column" marginLeft={1} gap={2}>
                                <Box>
                                  <Controller
                                    name="ceiling"
                                    control={control}
                                    render={({ field }) => (
                                      <TextInput
                                        {...field}
                                        id="thakInput"
                                        placeholder="Ekkert verðþak"
                                        backgroundColor="white"
                                        textColor="black100"
                                        isLabeled
                                        name="Skýring á reikning (valkvætt)"
                                      />
                                    )}
                                  />
                                </Box>
                                <Box>
                                  <Controller
                                    name="skyring"
                                    control={control}
                                    render={({ field }) => (
                                      <TextInput
                                        {...field}
                                        id="skyring"
                                        placeholder="Engin skýring"
                                        backgroundColor="white"
                                        textColor="black100"
                                        isLabeled
                                        name="Verðþak á hlut fyrirtækis (valkvætt)"
                                      />
                                    )}
                                  />
                                </Box>
                                {!!usedDepartments?.length && (
                                  <>
                                    <Box marginBottom={-1} marginLeft={1}>
                                      <Text
                                        color={'black100'}
                                        variant="pSmallBold"
                                        marginBottom={1}
                                      >
                                        Deild (valkvætt)
                                      </Text>
                                    </Box>
                                    <BaseWrapper withoutPadding>
                                      <Box>
                                        <Controller
                                          name="department"
                                          control={control}
                                          render={({ field }) => (
                                            <Select
                                              {...field}
                                              id="departments"
                                              color="grey400"
                                              isBold={false}
                                            >
                                              <option value="" hidden>
                                                -
                                              </option>
                                              {usedDepartments?.map(({ name, id }) => (
                                                <option key={id} value={id}>
                                                  {name}
                                                </option>
                                              ))}
                                            </Select>
                                          )}
                                        />
                                      </Box>
                                    </BaseWrapper>
                                  </>
                                )}
                              </Box>
                            </form>
                          )}
                        </Box>
                      </Box>
                    </BaseWrapper>
                  );
                })}
              </Box>
            )}
            {isMobile && (
              <Upsell
                button={{
                  text: 'Ég vil AlltSaman',
                  textVariant: 'pMediumBold',
                  backgroundColor: 'grey300',
                  borderColor: 'black100',
                  onClick: () =>
                    window.open(
                      'https://www.nova.is/alltsaman#alltsaman',
                      '_blank',
                      'noopener,noreferrer',
                    ),
                }}
                description={'Þú færð A, B og C með AlltSaman frá aðeins 12.990 kr. á mánuði'}
                title={'Stækkaðu í AlltSaman'}
              />
            )}
          </Box>
          <Box>
            {error && (
              <Text color="warning" variant="pMediumBold">
                {error}
              </Text>
            )}
            <Box display="flex" gap={1} flexDirection="column" marginTop={5} marginBottom={10}>
              <SecondaryButton
                colorScheme="grey800"
                isLoading={loadingCustomerInfo || loadingAddCustomer}
                icon="add"
                text="Bæta við síma"
                onClick={() => {
                  mobileSignup?.setUpdatingCartItemId(undefined);
                  mobileSignup.reset();
                  router.push('/farsimi/kaupa?step=viltu-pakka');
                }}
              />

              <MainButton
                isDisabled={hasAnySlideErrors}
                isLoading={loadingCustomerInfo || loadingAddCustomer}
                text="Klára dæmið"
                colorScheme="pink"
                onClick={() => onSubmit()}
              />
            </Box>
          </Box>
        </Box>
      ) : (
        <Box
          display="flex"
          flexDirection="column"
          justifyContent="center"
          style={{ maxWidth: '384px', height: '100vh', margin: 'auto auto' }}
        >
          <Empty color="pink" icon="basket" title="Karfan er tóm" />
          <Button
            textVariant="button"
            backgroundColor="white"
            text="Til baka"
            onClick={() => router.push('/farsimi/kaupa')}
          />
        </Box>
      )}
    </LayoutWrapper>
  );
};

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

export default inject('mobileSignup', 'cart', 'authentication', 'signupSteps')(observer(Yfirlit));