import React, { useMemo } from 'react';
import { ListLoader } from 'beta/components/loading-placeohlders/ListLoader';
import { isProvisionedSubscriptionVariant } from 'beta/utils/typeGuards';
import { inject, observer } from 'mobx-react';
import MobileSignup, {
  COMPANY,
  COMPANY_M2M,
  COMPANY_NETKORT,
  MobileSignupProducts,
} from 'store/mobileSignup';
import { OptionVariant, useProvisionedVariantsByIdQuery } from 'typings/graphql';
import { formatPrice } from 'utils/helpers';

import Step from '../containers/Step';

type OptionWithParent = {
  parentId: string;
  parentName: string;
  option: OptionVariant;
};

type SelectCompanyProductVariantsProps = {
  mobileSignup?: MobileSignup;
};
const SelectCompanyProductVariants = ({ mobileSignup }: SelectCompanyProductVariantsProps) => {
  if (!mobileSignup) return null;

  const onSubmit = (type: OptionWithParent) => {
    if (!type) return;
    const primaryVar = type.parentId;

    mobileSignup.setPrimaryVariant(primaryVar);
    mobileSignup.setSecondaryVariant(type.option.id ?? '');
    mobileSignup.setSelectedRequiredOption(type.option);
    mobileSignup.setSelectedQuestionVariant(undefined);
  };

  const productId = useMemo(() => {
    switch (mobileSignup.selectedSubscriptionType) {
      case MobileSignupProducts.Fyrirtaeki:
        return COMPANY;
      case MobileSignupProducts.Netkort:
        return COMPANY_NETKORT;
      default:
        return COMPANY_M2M;
    }
  }, [mobileSignup.selectedSubscriptionType]);

  const { data, loading, error } = useProvisionedVariantsByIdQuery({
    variables: {
      productId: productId,
    },
  });

  if (error) return null;

  const getFilteredOptionVariantsWithParent = (): OptionWithParent[] => {
    if (!data?.product?.variants) return [];

    return data.product.variants.filter(isProvisionedSubscriptionVariant).flatMap(
      (variant) =>
        variant.options?.flatMap(
          (option) =>
            option?.variants
              ?.filter((v) => !v.id.includes('utlandapakki'))
              .map((v) => ({
                parentId: variant.id,
                parentName: variant.name,
                option: v,
              })) ?? [],
        ) ?? [],
    );
  };

  return (
    <>
      {loading ? (
        <ListLoader rows={3} rowHeight={8} />
      ) : (
        getFilteredOptionVariantsWithParent()?.map((variant) => (
          <Step
            key={variant?.option.id}
            id={'hvernig-pakka'}
            isSelected={mobileSignup?.secondaryVariant === variant?.option.id}
            title={variant?.option.name ?? ''}
            {...(variant.option.monthlyCharge && {
              price: formatPrice(variant.option.monthlyCharge),
            })}
            subtitle={variant.option.variantDetails?.description ?? ''}
            onClick={() => onSubmit(variant)}
          />
        ))
      )}
    </>
  );
};
export default inject('mobileSignup')(observer(SelectCompanyProductVariants));