'use client'

import { useMemo } from 'react'

import { texts } from '@/texts'
import type { EventCategory } from '@/services/events'
import Input from '@/components/formElements/Input'
import { buildCategoryTree } from '@/helpers/categoryPath'

interface CategoryTreeSelectProps {
  name: string
  label: string
  categories: EventCategory[]
  required?: boolean
  disabled?: boolean
}

/**
 * Thin wrapper around formElements/Input that flattens categories into an
 * indented tree via `depth` on each option (rendered by ChoiceFieldControl).
 */
const CategoryTreeSelect = ({ name, label, categories, required, disabled }: CategoryTreeSelectProps) => {
  const selectOptions = useMemo(
    () =>
      buildCategoryTree(categories).map((option) => ({
        depth: option.depth,
        id: String(option.id),
        name: option.name,
      })),
    [categories]
  )

  return (
    <Input
      disabled={disabled}
      generalType="select"
      label={label}
      name={name}
      placeholder={texts.events.categoryPlaceholder}
      required={required}
      selectKey="id"
      selectOptions={selectOptions}
      selectValue="name"
    />
  )
}

export default CategoryTreeSelect