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 WhatDevice = ({ title, id, mobileSignup }: MobileChildrenProps) => {
  const [isSelected, setIsSelected] = useState('');

  const handleSelection = (selection: string) => {
    setIsSelected(selection);
    const container = document.getElementById('modal-content');
    if (container) {
      const scrollAmount = selection === 'thisDevice' ? window.innerHeight : window.innerHeight * 2;
      container.scrollBy({ top: scrollAmount, behavior: 'smooth' });
    }
    if (selection === 'otherDevice') {
      mobileSignup?.setIsActivatingOnAnotherDevice(true);
    }
    if (selection === 'thisDevice') {
      mobileSignup?.setIsActivatingOnAnotherDevice(false);
    }
  };

  return (
    <StepsWrapper id={id} title={title} isFirstStep={true}>
      <Step
        id={id}
        title="Virkja á þessu tæki"
        subtitle="Síminn sem ég held á er fyrir númerið"
        isSelected={isSelected === 'thisDevice'}
        onClick={() => handleSelection('thisDevice')}
        emoji={'wifi'}
      />
      <Step
        id={id}
        title="Virkja á öðru tæki"
        subtitle="Númer á að vera öðru tæki"
        isSelected={isSelected === 'otherDevice'}
        onClick={() => handleSelection('otherDevice')}
        emoji={'wifi'}
      />
    </StepsWrapper>
  );
};

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