import React, { useEffect, useRef } from 'react';
import { Box, ThemeColorType } from '@nova-hf/ui';
import gsap from 'gsap';

type ProgressBarItemProps = {
  isActive: boolean;
  isCurrentStep: boolean;
  color: ThemeColorType;
  isSolid: boolean;
};

export const ProgressBarItem = ({
  isActive,
  isCurrentStep,
  color,
  isSolid,
}: ProgressBarItemProps) => {
  const elRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!elRef.current) return;

    if (isActive && isCurrentStep) {
      gsap.fromTo(
        elRef.current,
        { scaleX: 0 },
        {
          scaleX: 1,
          transformOrigin: 'left center',
          duration: 0.5,
          ease: 'power2.out',
        },
      );
    } else {
      // Bara ef við viljum “resetta” ef hlutir verða óvirkir
      gsap.set(elRef.current, {
        scaleX: isActive ? 1 : 0,
        transformOrigin: 'left center',
      });
    }
  }, [isActive, isCurrentStep]);

  return (
    <Box
      position="relative"
      borderRadius={isSolid ? undefined : 'small'}
      backgroundColor="grey300"
      overflow="hidden"
      style={{
        flex: '1 1 auto',
        transition: 'none',
        transform: 'scaleX(1)',
        height: '8px',
      }}
    >
      <Box
        ref={elRef}
        position="absolute"
        left={0}
        top={0}
        bottom={0}
        width="100%"
        backgroundColor={isActive ? color : 'grey300'}
        style={{ transform: 'scaleX(0)', transformOrigin: 'left center' }}
      />
    </Box>
  );
};