import React, { useState, useRef, useEffect } from 'react';
import { ChevronDown } from './ChevronDown';
import { CustomSelectProps } from './types';
import {
  CustomSelectContainer,
  CustomSelectTrigger,
  CustomSelectChevron,
  CustomSelectOptionsList,
  CustomSelectOption
} from './styles';

export const CustomSelect: React.FC<CustomSelectProps> = ({
  id,
  value,
  options,
  onChange,
  $hasError,
  isApp,
  placeholder
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const selectedOption = options.find(o => o.value === value);
  const selectedLabel = selectedOption
    ? selectedOption.label
    : placeholder || '';

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (
        containerRef.current &&
        !containerRef.current.contains(e.target as Node)
      ) {
        setIsOpen(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  return (
    <CustomSelectContainer ref={containerRef}>
      <CustomSelectTrigger
        id={id}
        type="button"
        onClick={() => setIsOpen(prev => !prev)}
        $hasError={$hasError}
        isApp={isApp}
        $isPlaceholder={!selectedOption}
        aria-expanded={isOpen}
        aria-haspopup="listbox"
      >
        <span>{selectedLabel}</span>
        <CustomSelectChevron $isOpen={isOpen}>
          <ChevronDown />
        </CustomSelectChevron>
      </CustomSelectTrigger>
      {isOpen && (
        <CustomSelectOptionsList role="listbox">
          {options.map(o => (
            <CustomSelectOption
              key={o.value}
              $selected={o.value === value}
              role="option"
              aria-selected={o.value === value}
              onClick={() => {
                onChange(o.value);
                setIsOpen(false);
              }}
            >
              {o.label}
            </CustomSelectOption>
          ))}
        </CustomSelectOptionsList>
      )}
    </CustomSelectContainer>
  );
};