'use client';

import { useTranslation } from "@/lib/hooks/useTranslation";
import { useEffect, useRef, useState } from "react";

interface SortDropdownProps {
  value: string;
  onChange: (value: string) => void;
  label?: string;
}

export function SortDropdown({ value, onChange, label = "Label" }: SortDropdownProps) {
  const { t } = useTranslation();
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);
  
  // Get the currently selected option's display text
  const getSelectedOptionText = () => {
    switch(value) {
      case 'newest': return t('products.sort.newest');
      case 'price-asc': return t('products.sort.priceAsc');
      case 'price-desc': return t('products.sort.priceDesc');
      case 'name-asc': return t('products.sort.nameAsc');
      case 'name-desc': return t('products.sort.nameDesc');
      default: return t('products.sort.title');
    }
  };

  // Handle option selection
  const handleSelect = (value: string) => {
    onChange(value);
    setIsOpen(false);
  };
  
  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };
    
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  return (
    <div className="relative" ref={dropdownRef}>
      {/* Label */}
      <div className="text-sm text-gray-500 mb-1">{label}</div>
      
      {/* Dropdown button */}
      <div 
        className="flex items-center justify-between border border-gray-300 rounded px-4 py-2 bg-white cursor-pointer"
        onClick={() => setIsOpen(!isOpen)}
      >
        <span className="text-gray-800">{getSelectedOptionText()}</span>
        <svg 
          className={`w-4 h-4 ml-2 transform ${isOpen ? 'rotate-180' : ''}`} 
          xmlns="http://www.w3.org/2000/svg" 
          viewBox="0 0 20 20" 
          fill="currentColor"
        >
          <path 
            fillRule="evenodd" 
            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" 
            clipRule="evenodd" 
          />
        </svg>
      </div>
      
      {/* Dropdown menu */}
      {isOpen && (
        <div className="absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded shadow-lg">
          <div 
            className={`px-4 py-2 cursor-pointer hover:bg-primary/10 ${value === 'default' ? 'bg-primary/10 text-primary' : 'text-gray-800'}`}
            onClick={() => handleSelect('default')}
          >
            {t('products.sort.title')}
          </div>
          <div 
            className={`px-4 py-2 cursor-pointer hover:bg-primary/10 ${value === 'newest' ? 'bg-primary/10 text-primary' : 'text-gray-800'}`}
            onClick={() => handleSelect('newest')}
          >
            {t('products.sort.newest')}
          </div>
          <div 
            className={`px-4 py-2 cursor-pointer hover:bg-primary/10 ${value === 'price-asc' ? 'bg-primary/10 text-primary' : 'text-gray-800'}`}
            onClick={() => handleSelect('price-asc')}
          >
            {t('products.sort.priceAsc')}
          </div>
          <div 
            className={`px-4 py-2 cursor-pointer hover:bg-primary/10 ${value === 'price-desc' ? 'bg-primary/10 text-primary' : 'text-gray-800'}`}
            onClick={() => handleSelect('price-desc')}
          >
            {t('products.sort.priceDesc')}
          </div>
          <div 
            className={`px-4 py-2 cursor-pointer hover:bg-primary/10 ${value === 'name-asc' ? 'bg-primary/10 text-primary' : 'text-gray-800'}`}
            onClick={() => handleSelect('name-asc')}
          >
            {t('products.sort.nameAsc')}
          </div>
          <div 
            className={`px-4 py-2 cursor-pointer hover:bg-primary/10 ${value === 'name-desc' ? 'bg-primary/10 text-primary' : 'text-gray-800'}`}
            onClick={() => handleSelect('name-desc')}
          >
            {t('products.sort.nameDesc')}
          </div>
        </div>
      )}
    </div>
  );
} 