import React from 'react';
import { LoadingPage, MainButton } from '@nova-hf/ui';
import { Select } from 'frisco';
import Dropdown from 'frisco/Dropdown/Dropdown';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import Authentication from 'store/authentication';
import Cart from 'store/cart';
import {
  ContentTypeEntry_CfContent,
  SalesChannel,
  ShippingOptions,
  ShippingType,
  useCartAvailableShippingMethodsQuery,
  useGetShippingMethodsTextQuery,
} from 'typings/graphql';

import { useSignupScroll } from '../hooks/useSignupScroll';

import StepsWrapper from './StepsWrapper';

type AfhendingarmatarProps = {
  authentication?: Authentication;
  cart?: Cart;
};

type ComponentProps = {
  onClick?: () => void;
  options: ShippingOptions[];
};

type ShippingObject = {
  component: (props: ComponentProps) => JSX.Element;
};

export type ShippingOptionsType =
  | ShippingType.Dropp
  | ShippingType.Pickup
  | ShippingType.PostBox
  | ShippingType.HomeDelivery
  | ShippingType.InStore;

const Afhendingarmatar = ({ authentication, cart }: AfhendingarmatarProps) => {
  const router = useRouter();
  const { data: shippingTexts } = useGetShippingMethodsTextQuery({
    variables: {
      where: {
        slug: 'afhendingamatar',
      },
    },
  });

  const { onComplete } = useSignupScroll({ id: 'afhendingarmatar' });
  const { data, loading } = useCartAvailableShippingMethodsQuery({
    variables: {
      availableShippingMethodsInput: {
        salesChannel: authentication?.staffSalesLocation?.salesChannel ?? SalesChannel.Ecommerce,
      },
      input: {
        cartId: cart?.activeCartId ?? '',
      },
    },
  });

  if (loading)
    return (
      <StepsWrapper id={'123'} title={''}>
        <LoadingPage title={'Sæki afhendingarmáta'} timeToLoad={5} isLoading={true} />;
      </StepsWrapper>
    );

  const shippingTextEntries = shippingTexts?.orderedListCollection?.items[0]?.entriesCollection
    ?.items as ContentTypeEntry_CfContent[];

  const shippingSelected = cart?.shipmentOptions.shippingType;
  const dropBoxlocations = data?.cart?.availableShippingMethods?.find(
    (item) => item.shippingType === ShippingType.Dropp,
  );

  const pickupLocations = data?.cart?.availableShippingMethods?.find(
    (item) => item.shippingType === ShippingType.Pickup,
  );

  const inStoreLocations = data?.cart?.availableShippingMethods?.find(
    (item) => item.shippingType === ShippingType.InStore,
  );

  const postBoxLocations = data?.cart?.availableShippingMethods?.find(
    (item) => item.shippingType === ShippingType.PostBox,
  );

  const pickup = pickupLocations?.options?.map((item) => {
    return {
      text: item.title,
      isActive: item.value === cart?.shipmentOptions.shippingDetails?.storename,
      onClick: () =>
        cart?.setShippingMethods({
          shippingType: ShippingType.Pickup,
          shippingDetails: {
            storename: item.value,
          },
        }),
    };
  });

  const dropBox = dropBoxlocations?.options?.map((item) => {
    return {
      text: item.title,
      isActive: item.value === cart?.shipmentOptions.shippingDetails?.dropp,
      onClick: () =>
        cart?.setShippingMethods({
          shippingType: ShippingType.Dropp,
          shippingDetails: {
            dropp: item.value,
          },
        }),
    };
  });

  const stores = inStoreLocations?.options?.map((item) => {
    return {
      text: item.title,
      isActive: item.value === cart?.shipmentOptions.shippingDetails?.storename,
      onClick: () =>
        cart?.setShippingMethods({
          shippingType: ShippingType.InStore,
          shippingDetails: {
            storename: authentication?.staffSalesLocation?.salesLocation,
          },
        }),
    };
  });

  const postbox = postBoxLocations?.options?.map((item) => {
    return {
      text: item.title,
      isActive: item.value === cart?.shipmentOptions.shippingDetails?.postbox,
      onClick: () =>
        cart?.setShippingMethods({
          shippingType: ShippingType.PostBox,
          shippingDetails: {
            postbox: item.value,
          },
        }),
    };
  });

  const Shippings: Record<ShippingOptionsType, ShippingObject> = {
    Pickup: {
      component: () => {
        const pickupText = shippingTextEntries?.find(
          (item) => item.slug === ShippingType.Pickup.toLowerCase(),
        );

        if (authentication?.staffInStore) {
          return (
            <Select
              isSelected={shippingSelected === ShippingType.Pickup}
              title={pickupText?.title ?? ''}
              subtitle={pickupText?.subtitle ?? ''}
              emoji="wifi"
              onClick={() =>
                cart?.setShippingMethods({
                  shippingType: ShippingType.Pickup,
                  shippingDetails: {
                    storename: authentication.staffSalesLocation?.salesLocation,
                  },
                })
              }
            ></Select>
          );
        } else {
          const selectedPickup = pickupLocations?.options?.find(
            (item) => item.value === cart?.shipmentOptions.shippingDetails?.storename,
          );
          const pickupText = shippingTextEntries?.find(
            (item) => item.slug === ShippingType.Pickup.toLowerCase(),
          );
          return (
            <Select
              isSelected={shippingSelected === ShippingType.Pickup}
              title={pickupText?.title ?? ''}
              subtitle={pickupText?.subtitle ?? ''}
              emoji="afhending"
              onClick={() => cart?.setShippingMethods({ shippingType: ShippingType.Pickup })}
            >
              <Dropdown
                items={pickup!}
                buttonText={
                  selectedPickup && selectedPickup.title ? selectedPickup.title : 'Veldu Búð'
                }
              />
            </Select>
          );
        }
      },
    },
    Dropp: {
      component: () => {
        const selectedDropbox = dropBoxlocations?.options?.find(
          (item) => item.value === cart?.shipmentOptions.shippingDetails?.dropp,
        );
        const pickupText = shippingTextEntries?.find(
          (item) => item.slug === ShippingType.Dropp.toLowerCase(),
        );
        return (
          <Select
            isSelected={shippingSelected === ShippingType.Dropp}
            title={pickupText?.title ?? ''}
            subtitle={pickupText?.subtitle ?? ''}
            emoji="afhending"
            onClick={() => cart?.setShippingMethods({ shippingType: ShippingType.Dropp })}
          >
            <Dropdown
              items={dropBox!}
              buttonText={
                selectedDropbox && selectedDropbox.title ? selectedDropbox.title : 'Veldu dropp'
              }
            />
          </Select>
        );
      },
    },
    PostBox: {
      component: () => {
        const selectedPostbox = postBoxLocations?.options?.find(
          (item) => item.value === cart?.shipmentOptions.shippingDetails?.postbox,
        );
        const pickupText = shippingTextEntries?.find(
          (item) => item.slug === ShippingType.PostBox.toLowerCase(),
        );
        return (
          <Select
            isSelected={shippingSelected === ShippingType.PostBox}
            title={pickupText?.title ?? ''}
            subtitle={pickupText?.subtitle ?? ''}
            emoji="afhending"
            onClick={() => cart?.setShippingMethods({ shippingType: ShippingType.PostBox })}
          >
            <Dropdown
              items={postbox!}
              buttonText={
                selectedPostbox && selectedPostbox.title ? selectedPostbox.title : 'Veldu póstbox'
              }
            />
          </Select>
        );
      },
    },
    HomeDelivery: {
      component: () => {
        const pickupText = shippingTextEntries?.find(
          (item) => item.slug === ShippingType.HomeDelivery.toLowerCase(),
        );
        return (
          <Select
            isSelected={shippingSelected === ShippingType.HomeDelivery}
            title={pickupText?.title ?? ''}
            subtitle={pickupText?.subtitle ?? ''}
            emoji="afhending"
            onClick={() => cart?.setShippingMethods({ shippingType: ShippingType.HomeDelivery })}
          />
        );
      },
    },
    InStore: {
      component: () => {
        const selectedStore = inStoreLocations?.options?.find(
          (item) => item.value === cart?.shipmentOptions.shippingDetails?.storename,
        );
        const pickupText = shippingTextEntries?.find(
          (item) => item.slug === ShippingType.InStore.toLowerCase(),
        );

        return (
          <Select
            isSelected={shippingSelected === ShippingType.InStore}
            title={pickupText?.title ?? ''}
            subtitle={pickupText?.subtitle ?? ''}
            emoji="disco"
            onClick={() => cart?.setShippingMethods({ shippingType: ShippingType.InStore })}
          >
            {stores && (
              <Dropdown
                items={stores}
                buttonText={
                  selectedStore && selectedStore.title ? selectedStore.title : 'Veldu verslun'
                }
              />
            )}
          </Select>
        );
      },
    },
  };

  return (
    <StepsWrapper
      id={'afhendingarmatar'}
      title={'Afhending Sim'}
      subtitle="Þú virkjar nýja SIM-kortið þegar þú færð það í hendurnar. Einfalt og þægilegt"
      isFirstStep={true}
    >
      {data?.cart?.availableShippingMethods?.map((item) => {
        const Component = Shippings[item.shippingType as ShippingOptionsType].component;
        if (Component) {
          return <Component key={item.shippingType} options={item.options ?? []} />;
        }
      })}
      <MainButton
        onClick={() => {
          onComplete();
          router.push('/farsimi/greidsla');
        }}
        colorScheme="pink"
        isDisabled={!cart?.shipmentOptions.shippingType}
        text={'Velja'}
      />
    </StepsWrapper>
  );
};

export default inject('authentication', 'cart')(observer(Afhendingarmatar));