import React, { useRef, useEffect, useState } from 'react';

interface ScrollPickerProps {
  values: string[] | number[];
  selectedValue: string | number;
  onChange: (value: any) => void;
  label?: string;
}

export default function ScrollPicker({ values, selectedValue, onChange, label }: ScrollPickerProps) {
  const scrollRef = useRef<HTMLDivElement>(null);
  const isProgrammaticScroll = useRef(false);

  // Initialize and sync scroll position when selectedValue changes from outside
  useEffect(() => {
    const syncScroll = () => {
      const index = (values as any[]).indexOf(selectedValue);
      if (index !== -1 && scrollRef.current) {
        const itemHeight = 40;
        isProgrammaticScroll.current = true;
        scrollRef.current.scrollTop = index * itemHeight;
        setTimeout(() => {
          isProgrammaticScroll.current = false;
        }, 100);
      }
    };
    
    // Small delay to ensure DOM is rendered, especially when dropdown first opens
    const timer = setTimeout(syncScroll, 50);
    return () => clearTimeout(timer);
  }, [selectedValue, values]);

  const handleScroll = () => {
    if (!scrollRef.current || isProgrammaticScroll.current) return;
    
    const itemHeight = 40;
    const index = Math.round(scrollRef.current.scrollTop / itemHeight);
    const newValue = values[index];
    
    if (newValue !== undefined && newValue !== selectedValue) {
      onChange(newValue);
    }
  };

  return (
    <div className="flex flex-col items-center gap-1">
      {label && <span className="text-[9px] font-mono text-stone-400 uppercase tracking-tighter font-bold">{label}</span>}
      <div className="relative w-16 h-32 bg-stone-50 rounded-xl border border-stone-200 overflow-hidden group shadow-inner">
        {/* Selection Highlight */}
        <div className="absolute top-1/2 left-0 right-0 h-10 -translate-y-1/2 bg-stone-900 pointer-events-none z-10" />
        
        <div 
          ref={scrollRef}
          onScroll={handleScroll}
          className="h-full overflow-y-auto snap-y snap-mandatory py-[44px] no-scrollbar"
        >
          {values.map((v, i) => (
            <div 
              key={i}
              className={`h-10 flex items-center justify-center snap-center transition-all relative z-20 font-mono ${
                v === selectedValue ? 'text-white font-bold text-sm' : 'text-stone-300 text-[10px]'
              }`}
            >
              {v.toString().padStart(2, '0')}
            </div>
          ))}
        </div>
        
        {/* Decorative Gradients */}
        <div className="absolute top-0 left-0 right-0 h-8 bg-gradient-to-b from-stone-50 to-transparent pointer-events-none z-10" />
        <div className="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-stone-50 to-transparent pointer-events-none z-10" />
      </div>
    </div>
  );
}