cloudflare-domain-manager/apps/web/src/components/groups-board/domain-group-item.tsx

import { useEffect } from 'react'
import { useDroppable } from '@dnd-kit/core'
import { DomainGroupHeader } from '@/components/groups-board/domain-group-header'
import { DomainRow } from '@/components/groups-board/domain-row'
import type { BoardColumn } from '@/components/groups-board/types'
import type { Group } from '@/lib/schemas'
import {
  AccordionContent,
  AccordionItem,
} from '@cfdm/ui/components/accordion'
import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyTitle,
} from '@cfdm/ui/components/empty'
import { ItemGroup, ItemSeparator } from '@cfdm/ui/components/item'
import { cn } from '@cfdm/ui/lib/utils'

interface DomainGroupItemProps {
  column: BoardColumn
  isOpen?: boolean
  isDragging?: boolean
  onExpandColumn?: (columnId: string) => void
  onEditGroup?: (group: Group) => void
  onDeleteGroup?: (group: Group) => void
  dragDisabled?: boolean
  serviceLabelsByDomain?: Map<number, string[]>
}

export function DomainGroupItem({
  column,
  isOpen = true,
  isDragging = false,
  onExpandColumn,
  onEditGroup,
  onDeleteGroup,
  dragDisabled = false,
  serviceLabelsByDomain,
}: DomainGroupItemProps) {
  const { setNodeRef, isOver } = useDroppable({
    id: column.id,
    disabled: dragDisabled,
  })

  useEffect(() => {
    if (isOver && isDragging && !dragDisabled) {
      onExpandColumn?.(column.id)
    }
  }, [isOver, isDragging, dragDisabled, column.id, onExpandColumn])

  return (
    <AccordionItem
      value={column.id}
      className={cn(
        'not-last:border-b-0 overflow-hidden rounded-lg border border-border transition-colors',
        !isOpen && 'bg-muted/20',
        isOpen && 'bg-muted/30',
        isOver && !dragDisabled && 'ring-2 ring-primary/30',
      )}
    >
      <DomainGroupHeader
        column={column}
        isOpen={isOpen}
        isDragging={isDragging}
        dragDisabled={dragDisabled}
        onEditGroup={onEditGroup}
        onDeleteGroup={onDeleteGroup}
      />

      <AccordionContent className="px-1 pb-2">
        <div ref={setNodeRef}>
          {column.items.length > 0 ? (
            <ItemGroup className="gap-0 py-1">
              {column.items.map((domain, index) => (
                <div key={domain.id}>
                  {index > 0 ? <ItemSeparator className="my-0" /> : null}
                  <DomainRow
                    domain={domain}
                    serviceLabels={serviceLabelsByDomain?.get(domain.id)}
                    dragDisabled={dragDisabled}
                  />
                </div>
              ))}
            </ItemGroup>
          ) : (
            <Empty
              className={cn(
                'border border-dashed py-2',
                isOver && !dragDisabled && 'border-primary bg-primary/5',
              )}
            >
              <EmptyHeader>
                <EmptyTitle className="text-sm">Нет доменов в группе</EmptyTitle>
                <EmptyDescription>
                  Перетащите домен сюда
                </EmptyDescription>
              </EmptyHeader>
            </Empty>
          )}
        </div>
      </AccordionContent>
    </AccordionItem>
  )
}