'use client'

import React from 'react'
import Select from 'react-select'
import { SelectOption } from '@/app/types'

interface SingleSelectProps {
  name: string
  value: string
  handleChange: (e: { target: { id: string; value: string } }) => void
  label: string
  placeholder: string
  options: SelectOption[]
  className?: string
  noOptionsMessage?: string
}

const SingleSelect: React.FC<SingleSelectProps> = ({
  name,
  value,
  handleChange,
  label,
  placeholder,
  options,
  className = '',
  noOptionsMessage = 'Нет доступных вариантов',
}) => {
  return (
    <div className={className}>
      <label htmlFor={name} className="mb-1 block text-sm font-medium text-gray-700">
        {label}
      </label>
      <Select<SelectOption>
        inputId={name}
        name={name}
        options={options}
        value={options.find(opt => opt.id.toString() === value)}
        onChange={selectedOption => {
          handleChange({
            target: {
              id: name,
              value: selectedOption?.id.toString() || '',
            },
          })
        }}
        isSearchable
        isClearable
        placeholder={placeholder}
        noOptionsMessage={() => noOptionsMessage}
        classNamePrefix="select"
        className="rounded-lg"
        styles={{
          control: base => ({
            ...base,
            borderRadius: '0.75rem',
            backgroundColor: '#F3F4F6',
            border: '1px solid #E5E7EB',
            padding: '2px',
            '&:hover': {
              borderColor: '#E5E7EB',
            },
            '&:focus-within': {
              backgroundColor: '#FFFFFF',
              borderColor: '#E5E7EB',
              boxShadow: '0 0 0 2px rgba(59, 130, 246, 0.5)',
            },
          }),
          menu: base => ({
            ...base,
            position: 'absolute',
            width: '100%',
            zIndex: 9999,
            marginTop: '4px',
            borderRadius: '0.75rem',
            overflow: 'hidden',
          }),
          option: (base, state) => ({
            ...base,
            fontSize: '0.875rem',
            padding: '8px 12px',
            backgroundColor: state.isSelected ? '#EFF6FF' : state.isFocused ? '#F3F4F6' : 'white',
            color: state.isSelected ? '#2563EB' : '#1F2937',
            cursor: 'pointer',
            '&:active': {
              backgroundColor: '#DBEAFE',
            },
            '&:hover': {
              backgroundColor: state.isSelected ? '#EFF6FF' : '#F3F4F6',
            },
          }),
        }}
      />
    </div>
  )
}

export default SingleSelect