import React, { useState } from 'react';
import { inject, observer } from 'mobx-react';

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

import StepsWrapper from './StepsWrapper';

const MobileOrAlltsaman = ({ title, id, mobileSignup }: MobileChildrenProps) => {
  if (!mobileSignup) return null;
  const [isSelected, setIsSelected] = useState(false);

  const handleAlltSamanReRoute = () => {
    window.open('https://www.nova.is/alltsaman#alltsaman', '_blank', 'noopener,noreferrer');
  };

  const hasSelectedMobile = () => {
    mobileSignup?.fetchAllProducts();
    setIsSelected(true);
  };

  return (
    <StepsWrapper id={id} title={title} isFirstStep={true}>
      <Step
        id={id}
        title="Já"
        subtitle="Besti díllinn á heimaneti og farsíma í einum pakka."
        isSelected={false}
        onClick={() => handleAlltSamanReRoute()}
        emoji={'wifi'}
        noAutoScroll
      />
      <Step
        id={id}
        title="Nei"
        subtitle="Ég vil bara farsíma"
        isSelected={
          isSelected || mobileSignup.isUpdatingSubscription || !!mobileSignup?.getFromCookie()
        }
        onClick={() => hasSelectedMobile()}
        emoji={'farsimi'}
      />
    </StepsWrapper>
  );
};

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