import React, { useEffect, useState } from 'react';
import { Box, Container, Text } from '@nova-hf/ui';
import { inject, observer } from 'mobx-react';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { E_SIM_CARD } from 'store/mobileSignup';
import { IContext } from 'typings/context';

import BaseLayout from '../../../frisco/BaseLayout/BaseLayout';
import UI from '../../../store/ui';
import { MobileOrderStatus, OrderItem, useOrderQuery } from '../../../typings/graphql';
import AudkenniReminder from '../components/AudkenniReminder';
import LayoutWrapper from '../components/LayoutWrapper';
import PromotionalSlider from '../components/PromotionalSlider';
import TransferNumberStatus from '../components/TransferNumberStatus';

type TakkProps = {
  ui: UI;
};

const Takk = ({ ui }: TakkProps) => {
  const router = useRouter();
  const orderId = router?.query?.orderId;
  const { data } = useOrderQuery({
    variables: { input: { orderId: orderId?.toString() ?? '' } },
    skip: !orderId,
  });
  const order = data?.order;
  const hasShippingInfo = order?.shippingInfo;
  const fetchedItems = data?.order?.items;
  const [completedPhoneNumbers, setCompletedPhoneNumbers] = useState<string[]>([]);
  const [hasEsim, setHasEsim] = useState(false);

  const groupOrderItems = (items: OrderItem[]): OrderItem[][] => {
    const groups: OrderItem[][] = [];
    const itemMap = new Map<string, OrderItem>();

    items.forEach((item) => item.id && itemMap.set(item.id, item));

    const rootItems = items.filter(
      (item) =>
        item.id &&
        item.orderItemAttributes?.__typename !== 'SubscriptionOrderItemAttributes' &&
        item.orderItemAttributes?.__typename !== 'PhoneNumberOrderItemAttributes',
    );

    rootItems.forEach((root) => {
      const group: OrderItem[] = [root];

      const subscriptionItem = items.find(
        (item) =>
          item.orderItemAttributes?.__typename === 'SubscriptionOrderItemAttributes' &&
          item.orderItemAttributes?.contract?.orderItemId === root.id,
      );
      if (subscriptionItem) group.push(subscriptionItem);

      const phoneNumberItem = items.find(
        (item) =>
          item.orderItemAttributes?.__typename === 'PhoneNumberOrderItemAttributes' &&
          item.orderItemAttributes?.contractOrderItemId === root.id &&
          item?.orderItemAttributes?.phoneNumber,
      );
      if (phoneNumberItem) {
        const relatedPhoneItems = items.filter(
          (item) =>
            item.orderItemAttributes?.__typename === 'PhoneNumberOrderItemAttributes' &&
            item.orderItemAttributes?.serviceCartItemId ===
              phoneNumberItem.orderItemAttributes?.serviceCartItemId &&
            !item.orderItemAttributes?.phoneNumber,
        );
        group.push(...relatedPhoneItems);
      } else {
        const relatedPhoneItems = items.filter((item) => item.id === subscriptionItem?.id);
        group.push(...relatedPhoneItems);
      }

      groups.push(group);
    });

    return groups;
  };
  const items = fetchedItems as OrderItem[];
  const groupedItems = items ? groupOrderItems(items) : undefined;
  const lowercaseFirstLetter = (str: string): string => {
    return str.charAt(0).toLowerCase() + str.slice(1);
  };

  const getIfComplete = (status: MobileOrderStatus, phoneNumber: string) => {
    if (status === MobileOrderStatus.Completed) {
      setCompletedPhoneNumbers((prev) => {
        if (!prev.includes(phoneNumber)) {
          return [...prev, phoneNumber];
        }
        return prev;
      });
    }
  };

  useEffect(() => {
    ui.setIsHiddenFooter(true);
    ui.setHeaderStyle('dark');
    setHasEsim(fetchedItems?.some((item) => item.variantId === E_SIM_CARD) ?? false);
  }, []);

  return (
    <Box marginBottom={10}>
      <LayoutWrapper image="http://images.ctfassets.net/j5d5y4z9f7ki/Zcj3GzkL4KEsTy0gPmFb6/a778596a4962262d5db1db3b80721492/809053afce3ad2edb6e4cda5b887839648bbf400.jpg">
        <Container marginTop={20}>
          {hasEsim && (
            <Box marginBottom={3}>
              <AudkenniReminder />
            </Box>
          )}
          {groupedItems?.map((group) => {
            const subscriptionItem = group.find(
              (item) =>
                item.orderItemAttributes?.__typename === 'SubscriptionOrderItemAttributes' &&
                item.orderItemAttributes?.service,
            );

            const isFlutningur =
              subscriptionItem?.orderItemAttributes?.__typename ===
                'SubscriptionOrderItemAttributes' &&
              !subscriptionItem?.orderItemAttributes?.service?.isNewNumber;
            const isPlast = group.find((item) => item.variantId?.includes('plast'));

            const phoneNumber =
              subscriptionItem &&
              subscriptionItem.orderItemAttributes?.__typename ===
                'SubscriptionOrderItemAttributes' &&
              subscriptionItem.orderItemAttributes?.service &&
              subscriptionItem.orderItemAttributes?.service?.__typename ===
                'ServiceOrderItemAttributes'
                ? subscriptionItem?.orderItemAttributes?.service?.phoneNumber
                : '';

            const title = phoneNumber
              ? `${phoneNumber.slice(0, 3)} ${phoneNumber.slice(3, 7)}`
              : '';

            return (
              <Box key={phoneNumber} marginBottom={3}>
                <BaseLayout
                  key={subscriptionItem?.id}
                  title={title}
                  subtitle={
                    subscriptionItem?.orderItemAttributes?.__typename ===
                      'SubscriptionOrderItemAttributes' &&
                    subscriptionItem?.orderItemAttributes?.service?.user?.name
                      ? subscriptionItem?.orderItemAttributes?.service?.user?.name
                      : ''
                  }
                >
                  <Box>
                    <Box
                      display="flex"
                      flexDirection="row"
                      alignItems="center"
                      justifyContent="space-between"
                    >
                      <Text marginBottom={1} variant="pMediumBold" color="pink">
                        Farsími
                      </Text>
                      {phoneNumber && completedPhoneNumbers.includes(phoneNumber) && (
                        <Text marginBottom={1} variant="pMediumRegular" color="success">
                          ✓ Allt komið
                        </Text>
                      )}
                    </Box>
                    {group?.map((item, index) => {
                      if (index === 0 && group.length > 1) {
                        const itemOne = group[0];
                        const itemTwo = group[1];

                        return (
                          <Box key={`${itemOne?.id}-${itemTwo?.id}`}>
                            {!itemOne?.variantId?.includes('simanumer') &&
                              !itemTwo?.variantId?.includes('simanumer') && (
                                <Box marginBottom={1} display="flex" flexDirection="column">
                                  <Text color="grey600" variant="pMediumRegular">
                                    {`${itemOne?.name}: ${itemTwo?.name}`}
                                  </Text>
                                </Box>
                              )}
                          </Box>
                        );
                      }
                      if (index === 1) return null;
                      return (
                        <Box key={item?.id}>
                          <Box marginBottom={1} display="flex" flexDirection="column">
                            <Text color="grey600" variant="pMediumRegular">
                              {item?.name}
                            </Text>
                          </Box>
                        </Box>
                      );
                    })}
                    <Box marginTop={2} marginLeft={-2}>
                      {phoneNumber && !isPlast && !completedPhoneNumbers.includes(phoneNumber) && (
                        <TransferNumberStatus
                          isFlutningur={isFlutningur}
                          phoneNumber={phoneNumber}
                          getIfComplete={getIfComplete}
                        />
                      )}
                    </Box>
                  </Box>
                  {hasShippingInfo && isPlast && (
                    <Box>
                      <Text variant="pSmallBold">{`SIM kort ${lowercaseFirstLetter(
                        order?.shippingInfo?.title ?? '',
                      )}`}</Text>
                      <Text color="grey500" variant="pSmallRegular">
                        SIM kortið þitt virkjast þegar þú setur kortið í símann.
                      </Text>
                    </Box>
                  )}
                </BaseLayout>
              </Box>
            );
          })}
          <Box marginTop={1} display="flex" flexDirection="column">
            <Box marginBottom={5} display="flex" flexDirection="column">
              <Text marginBottom={1} variant="h6">
                App, app og áfram!
              </Text>
              <Text marginBottom={2} color="grey400" variant="pXSmallRegular">
                Náðu í Nova appið og byrjaðu að strax að njóta!
              </Text>
              <Box gap={2} display="flex" flexDirection="row">
                <a
                  href="https://apps.apple.com/us/app/nova-iceland/id544945754"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <Image
                    src={require('assets/images/mobile-signup/appStore.png').default.src}
                    alt="App Store"
                    width={144}
                    height={157}
                  />
                </a>
                <a
                  href="https://play.google.com/store/apps/details?id=is.nova.app&hl=en"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <Image
                    src={require('assets/images/mobile-signup/googlePlay.png').default.src}
                    alt="Google Play"
                    width={144}
                    height={157}
                  />
                </a>
              </Box>
            </Box>
            <PromotionalSlider slug="app-app-og-afram" limit={20} />
          </Box>
        </Container>
      </LayoutWrapper>
    </Box>
  );
};

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

export default inject('ui')(observer(Takk));