import React from 'react';
import { inject, observer } from 'mobx-react';
import { MobileSignupProducts } from 'store/mobileSignup';
import { NumberType } from 'typings/graphql';

import Step from '../containers/Step';
import { MobileChildrenProps } from '../kaupa/StepSetup';

import StepsWrapper from './StepsWrapper';

const SelectCompanySubscription = ({ title, id, mobileSignup }: MobileChildrenProps) => {
  if (!mobileSignup) return null;

  const onSubmit = (type: MobileSignupProducts) => {
    mobileSignup.setSelectedSubscriptionType(type);
    if (type !== MobileSignupProducts.Fyrirtaeki) {
      mobileSignup.setSelectedNumer(mobileSignup.randomNetnumer, NumberType.Normal, true);
    }
    mobileSignup.setSelectedQuestionVariant(undefined);
  };

  return (
    <StepsWrapper id={id} title={title}>
      <Step
        id={id}
        subtitle="Fyrirgramgreidd áskrift. Þú veist alltaf hvað þú greiðir og enginn óvæntur kostnaður"
        isSelected={mobileSignup?.selectedSubscriptionType === MobileSignupProducts.Frelsi}
        title="Frelsi"
        onClick={() => onSubmit(MobileSignupProducts.Frelsi)}
        emoji={'frelsi'}
      />
      {!mobileSignup?.isOskrad && (
        <Step
          id={id}
          subtitle="Eftirágreidd áskrift án takmarkana. Áskriftarleið sem aðlagar sig að þinni notkun."
          isSelected={mobileSignup?.selectedSubscriptionType === MobileSignupProducts.Askrift}
          title="Áskrift"
          onClick={() => onSubmit(MobileSignupProducts.Askrift)}
          emoji={'askrift'}
        />
      )}
      <Step
        id={id}
        subtitle="Eitthvað fyrir allar stærðir fyrirtækja. Ótakmarkað, sveigjanlegt eða núllið. Þitt er valið!"
        isSelected={mobileSignup?.selectedSubscriptionType === MobileSignupProducts.Fyrirtaeki}
        title="Fyrirtækjasími"
        onClick={() => onSubmit(MobileSignupProducts.Fyrirtaeki)}
        emoji={'wifi'}
      />
      <Step
        id={id}
        subtitle="Eftirágreidd áskrift án takmarkana. Ef þú ferð yfir netpakkann þinn ferð þú sjálfkrafa í næsta netpakka."
        isSelected={mobileSignup?.selectedSubscriptionType === MobileSignupProducts.Netkort}
        title="5G Netkort"
        onClick={() => onSubmit(MobileSignupProducts.Netkort)}
        emoji={'wifi'}
      />
      <Step
        id={id}
        subtitle="Machine to machine! Eru tækin þín að tala saman? Þurfa þau net? Símtöl eða bara SMS?"
        isSelected={mobileSignup?.selectedSubscriptionType === MobileSignupProducts.M2M}
        title="M2M netkort"
        onClick={() => onSubmit(MobileSignupProducts.M2M)}
        emoji={'wifi'}
      />
    </StepsWrapper>
  );
};
export default inject('mobileSignup')(observer(SelectCompanySubscription));