import React, { useState } from 'react';
import { Box, Radio, Text } from '@nova-hf/ui';
import { isProvisionedSubscriptionVariant } from 'beta/utils/typeGuards';
import { Select } from 'frisco';
import { inject, observer } from 'mobx-react';
import MobileSignup from 'store/mobileSignup';
import { ProvisionedSubscriptionVariant, useProductsByIdQuery } from 'typings/graphql';
import { formatPrice } from 'utils/helpers';

const findProductTitle = (slug: string) => {
  if (slug.toLowerCase().includes('internet')) return 'Gagnamagn';
  if (slug.toLowerCase().includes('kronu')) return 'Krónuáfylling';
  return slug;
};

const findProductDescription = (slug: string) => {
  if (slug.toLowerCase().includes('internet'))
    return 'Gildir í 30 daga. Frí símtöl og SMS fylgja innanlands og innan EES.';
  if (slug.toLowerCase().includes('kronu'))
    return 'Gildir í 30 daga. Frí símtöl og SMS fylgja innanlands og innan EES. Þú notar krónuáfyllingu fyrir símtöl í þjónustunúmer, símtöl til útlanda eða símtöl, SMS og netnotkun utan EES.';
  return slug;
};

type SelectCompanyProductVariantsProps = {
  mobileSignup?: MobileSignup;
  onCompleted: () => void;
};
const SingleOfferingsVariants = ({
  mobileSignup,
  onCompleted,
}: SelectCompanyProductVariantsProps) => {
  const [selectedProduct, setSelectedProduct] = useState(
    mobileSignup?.selectedProvisionedVariantOption?.slug,
  );
  if (!mobileSignup) return null;

  const onSubmit = (type: ProvisionedSubscriptionVariant) => {
    mobileSignup.setSelectedProvisionedVariantOption(type);
    mobileSignup.setSecondaryVariant(type.id);
    mobileSignup.setSelectedQuestionVariant(undefined);
    onCompleted();
  };

  const { data } = useProductsByIdQuery({
    variables: {
      id: '140140',
    },
  });

  return (
    <>
      {data?.productsById?.products
        .filter((product) => !product.slug?.includes('utlandapakki'))
        .map((product) => {
          const productIsSelected = product.slug === selectedProduct;
          const shouldStayOpen = product.variants.some(
            (item) => item.id === mobileSignup?.selectedProvisionedVariantOption?.id,
          );
          return (
            <Box key={product.name} marginBottom={2}>
              <Select
                title={findProductTitle(product.slug ?? '')}
                subtitle={findProductDescription(product.slug ?? '')}
                isSelected={productIsSelected || shouldStayOpen}
                selectUnit="checkbox"
                {...(shouldStayOpen && { openAtAllTimes: true })}
                onClick={() => setSelectedProduct(productIsSelected ? '' : product.slug ?? '')}
              >
                <Box padding={2} width="100%">
                  {product.variants.filter(isProvisionedSubscriptionVariant).map((item) => {
                    const itemIsSelected =
                      item.id === mobileSignup.selectedProvisionedVariantOption?.id;
                    return (
                      <Box key={item.name} marginBottom={2}>
                        <Box
                          renderAs="button"
                          cursor="pointer"
                          onClick={() => onSubmit(item)}
                          display="flex"
                          borderRadius="medium"
                          padding={2}
                          width="100%"
                          justifyContent="space-between"
                          background="grey100"
                          boxShadow={{ focusVisible: 'focused' }}
                        >
                          <Box display="inline-flex" gap={1} alignItems="center">
                            <Radio isChecked={itemIsSelected} color="pink" isDecorative />
                            <Text variant="pMediumBold">{item.name ?? ''}</Text>
                          </Box>
                          <Box>
                            <Text variant="pMediumBold">{formatPrice(item.price)}</Text>
                          </Box>
                        </Box>
                      </Box>
                    );
                  })}
                </Box>
              </Select>
            </Box>
          );
        })}
    </>
  );
};
export default inject('mobileSignup')(observer(SingleOfferingsVariants));