import React from 'react';
import { Box, MainButton } from '@nova-hf/ui';
import SelectCard from 'frisco/SelectCard/SelectCard';
import { inject, observer } from 'mobx-react';
import { type ExtraServices, URLAUSN, UTLANDAPAKKI } from 'store/mobileSignup';
import { OptionVariant } from 'typings/graphql';

import { useSignupScroll } from '../hooks/useSignupScroll';
import { MobileChildrenProps } from '../kaupa/StepSetup';

import StepsWrapper from './StepsWrapper';

const ExtraServices = ({ id, title, mobileSignup, authentication }: MobileChildrenProps) => {
  if (!mobileSignup || !authentication?.isTokenValid) return null;
  const { onComplete } = useSignupScroll({ id });

  const onSelectedVariant = (variant: ExtraServices) => {
    if (variant === UTLANDAPAKKI) {
      let utlandapakkiType: OptionVariant | undefined;
      if (mobileSignup.primaryVariant.includes('frelsi')) {
        utlandapakkiType = mobileSignup.foreignPacks.find((item) => item?.id.includes('frelsi'));
      } else {
        utlandapakkiType = mobileSignup.foreignPacks.find((item) => item?.id.includes('askrift'));
      }
      if (mobileSignup?.hasUtlandapakki) {
        utlandapakkiType && mobileSignup.removeExtraVariant(utlandapakkiType.id);
      } else {
        utlandapakkiType && mobileSignup?.setExtraVariant(utlandapakkiType.id);
      }
    }

    if (variant === URLAUSN) {
      if (mobileSignup?.hasUrlausn) {
        mobileSignup.removeExtraVariant(variant);
      } else {
        mobileSignup?.setExtraVariant(variant);
      }
    }
  };

  const utlandapakkiVariant = mobileSignup.primaryVariant.includes('frelsi')
    ? mobileSignup.foreignPacks[0]
    : mobileSignup.foreignPacks[1];
  const utlandapakkiPrice =
    (utlandapakkiVariant?.id && mobileSignup.getVariantPrice(utlandapakkiVariant?.id)) || 0;
  return (
    <StepsWrapper title={title} id={id}>
      <Box display="flex" flexDirection="column" gap={2}>
        <SelectCard
          onSelect={() => onSelectedVariant('farsimi-utlandapakki')}
          isSelected={mobileSignup?.hasUtlandapakki || false}
          title={'Hringirðu oft til útlanda?'}
          description="Kjörið fyrir þau sem hringja a.m.k. mánaðarlega í erlent símanúmer."
          emoji="hringtTilUtlanda"
          price={utlandapakkiPrice}
        />
        <MainButton
          colorScheme="pink"
          text={mobileSignup?.hasExtraServices ? 'Áfram' : 'Nei takk'}
          onClick={() => onComplete()}
        />
      </Box>
    </StepsWrapper>
  );
};

export default inject('mobileSignup', 'authentication')(observer(ExtraServices));