import { useMemo } from 'react'

import { Label } from '@evobgp/ui/components/label'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@evobgp/ui/components/select'

import {
  NONE_OPTION,
  communityOptionLabel,
  fromNullableSelect,
  nullableSelectValue,
} from '@/lib/modules/helpers'
import type { BgpCommunity } from '@/types/api'

interface CommunitySelectProps {
  id?: string
  label?: string
  value: string | null
  onValueChange: (value: string | null) => void
  communities: BgpCommunity[]
  nullable?: boolean
  placeholder?: string
}

export function CommunitySelect({
  id,
  label,
  value,
  onValueChange,
  communities,
  nullable = false,
  placeholder = 'Выберите community',
}: CommunitySelectProps) {
  const items = useMemo(() => {
    const communityItems = communities.map((c) => ({
      value: c.id,
      label: communityOptionLabel(c),
    }))
    if (nullable) {
      return [{ value: NONE_OPTION, label: 'Не выбрано' }, ...communityItems]
    }
    return communityItems
  }, [communities, nullable])

  const selectValue = nullable ? nullableSelectValue(value) : (value ?? '')

  return (
    <div className="flex flex-col gap-1.5">
      {label ? <Label htmlFor={id}>{label}</Label> : null}
      <Select
        items={items}
        value={selectValue}
        onValueChange={(v) => {
          if (!v) return
          onValueChange(nullable ? fromNullableSelect(v) : v)
        }}
      >
        <SelectTrigger id={id} className="w-full">
          <SelectValue placeholder={placeholder} />
        </SelectTrigger>
        <SelectContent>
          {items.map((item) => (
            <SelectItem key={item.value} value={item.value}>
              {item.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  )
}