import React from 'react'
import Selector, { Option } from '@/components/ui/Selector'

export interface Role {
  id: number
  value: string
  label: string
  [key: string]: string | number
}

interface RoleSelectorProps {
  name: string
  value: string
  handleChange: (e: {
    target: {
      id: string
      value: string
      selectedOption?: Option
    }
  }) => void
  label?: string
  tooltip?: string | React.ReactNode
  placeholder?: string
}

const ROLES = [
  { id: 1, value: 'engineer', label: 'Инженер' },
  { id: 2, value: 'operator', label: 'Оператор' },
  { id: 3, value: 'admin', label: 'Администратор' },
]

const RoleSelector: React.FC<RoleSelectorProps> = ({
  name,
  value,
  handleChange,
  label,
  tooltip,
  placeholder,
}) => {
  const handleSelectorChange = (e: {
    target: {
      id: string
      value: Option | null
      selectedOption?: Option
    }
  }) => {
    const selectedOption = e.target.value
    handleChange({
      target: {
        id: name,
        value: selectedOption?.value || '',
        selectedOption: selectedOption || undefined,
      },
    })
  }

  // Находим текущее значение в списке для отображения
  const currentValue = ROLES.find(role => role.value === value)

  return (
    <Selector<Role>
      name={name}
      value={currentValue}
      handleChange={handleSelectorChange}
      label={label}
      tooltip={tooltip}
      placeholder={placeholder}
      mapDataToOptions={role => ({
        id: role.id,
        value: role.value,
        label: role.label,
      })}
      staticOptions={ROLES}
    />
  )
}

export default RoleSelector