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

  const handleSelection = (selection: string) => {
    setIsSelected(selection);
    const container = document.getElementById('modal-content');
    if (container) {
      const scrollAmount = window.innerHeight * 1.5;
      container.scrollBy({ top: scrollAmount, behavior: 'smooth' });
    }
    if (selection === 'android') {
      mobileSignup?.setDeviceType('android');
    }
    if (selection === 'iphone') {
      mobileSignup?.setDeviceType('iphone');
    }
  };

  return (
    <StepsWrapper id={id} title={title} isFirstStep={true}>
      <Step
        id={id}
        title="iPhone"
        subtitle="Þessi með eplinu aftaná"
        isSelected={isSelected === 'iphone'}
        onClick={() => handleSelection('iphone')}
        emoji={'wifi'}
      />
      <Step
        id={id}
        title="Android"
        subtitle="Samsung, LG, Huaweii o.fl."
        isSelected={isSelected === 'android'}
        onClick={() => handleSelection('android')}
        emoji={'wifi'}
      />
    </StepsWrapper>
  );
};

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