import React from 'react';
import { TextProps } from 'frisco/PredefinedProps';
import Select from 'frisco/Select/Select';
import { StepIds } from 'store/signupSteps';

import { Emoji } from '../../../assets/images/mobile-signup';
import { useSignupScroll } from '../hooks/useSignupScroll';

// Vantar isActive state.
// Vantar onClick function
type ButtonWrapperProps = {
  children?: React.ReactNode;
  onClick?: () => void;
  isSelected: boolean;
  emoji?: Emoji;
  price?: string;
  noAutoScroll?: boolean;
  isPopular?: boolean;
  isRecommended?: boolean;
  id: StepIds;
} & TextProps;

// Þar sem að þessi component er í raun bara takki sem að sendir v.v
// áfram í næsta skref miðað við hönnun.
// Pæling að hafa onClick í parent sem að gerir virknina fyrir hann. T.d.
// Setja í körfu, þá triggerast það í þessum component.
const Step = ({
  children,
  onClick,
  isSelected,
  noAutoScroll,
  id,
  ...props
}: ButtonWrapperProps) => {
  const { isLastStep, onComplete, removeCompleted } = useSignupScroll({
    id,
  });
  const onSomeClick = () => {
    if (onClick) onClick();
    if (!(isLastStep || noAutoScroll)) {
      if (id === 'hvernig-samband') {
        removeCompleted('hvernig-pakka');
      }
      onComplete();
    }
  };
  return (
    <Select isSelected={isSelected} onClick={onSomeClick} {...props}>
      {children && children}
    </Select>
  );
};
export default Step;