import React, { useEffect, useRef, useState } from 'react';
import { Input, MainButton } from '@nova-hf/ui';
import { inject, observer } from 'mobx-react';

import { useSignupScroll } from '../hooks/useSignupScroll';
import { MobileChildrenProps } from '../kaupa/StepSetup';

import StepsWrapper from './StepsWrapper';

const SalesNumber = ({ id, title, cart, mobileSignup, signupSteps }: MobileChildrenProps) => {
  if (!mobileSignup) return null;
  const [salesNumber, setSalesNumber] = useState(cart?.salesNumber || '');
  const { onComplete } = useSignupScroll({ id });
  const inputRef = useRef<HTMLInputElement>(null);

  const onSubmit = () => {
    cart?.setSalesNumber(salesNumber);
    onComplete();
  };
  useEffect(() => {
    if (inputRef.current && signupSteps?.currentStepId === id) {
      inputRef.current.focus();
    }
  }, []);
  return (
    <StepsWrapper
      title={title}
      subtitle="Smelltu inn sölunúmerinu þínu svo við vitum hver þú ert!"
      id={id}
      isFirstStep
    >
      <Input
        id={'SalesNumber'}
        ref={inputRef}
        name={'SalesNumber'}
        onChange={(e) => setSalesNumber(e?.target.value)}
        placeholder={'Sölunúmer'}
        backgroundColor='grey100'
        value={salesNumber}
        onKeyDown={(e) => {
          if (e.key === 'Enter' && salesNumber.length >= 2) {
            onSubmit();
          }
        }}
        trailingElement={
          <MainButton
            text="Innskrá"
            onClick={() => onSubmit()}
            isDisabled={salesNumber.length === 0}
            buttonHeight={6}
          />
        }
      />
    </StepsWrapper>
  );
};

export default inject('cart', 'mobileSignup', 'signupSteps')(observer(SalesNumber));