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

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

import StepsWrapper from './StepsWrapper';

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

  const onSubmit = (type: MobileSignupProducts) => {
    mobileSignup?.setSelectedSubscriptionType(type);
    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="Fylltu á þig eftir þörfum. Ekkert mánaðarlegt gjald"
        isSelected={mobileSignup?.selectedSubscriptionType === MobileSignupProducts.Stakt}
        title="Stök áfylling"
        onClick={() => onSubmit(MobileSignupProducts.Stakt)}
        emoji={'afylling'}
      />
    </StepsWrapper>
  );
};

export default inject('mobileSignup')(observer(SelectSubscriptionType));