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

import { useEffect, useMemo, useState } from 'react'
import { DragContextProvider } from '@/components/board/drag-context-provider'
import { DomainGroupItem } from '@/components/groups-board/domain-group-item'
import { DomainRow } from '@/components/groups-board/domain-row'
import type { BoardState } from '@/components/groups-board/types'
import type { DomainListItem, Group } from '@/lib/schemas'
import { AppAccordion } from '@/components/app-accordion'

interface GroupsBoardProps {
  board: BoardState
  activeDomain?: DomainListItem
  dragDisabled?: boolean
  onDragStart: Parameters<typeof DragContextProvider>[0]['onDragStart']
  onDragEnd: Parameters<typeof DragContextProvider>[0]['onDragEnd']
  onEditGroup?: (group: Group) => void
  onDeleteGroup?: (group: Group) => void
  serviceLabelsByDomain?: Map<number, string[]>
}

export function GroupsBoard({
  board,
  activeDomain,
  dragDisabled = false,
  onDragStart,
  onDragEnd,
  onEditGroup,
  onDeleteGroup,
  serviceLabelsByDomain,
}: GroupsBoardProps) {
  const columnIds = useMemo(
    () => board.columns.map((column) => column.id),
    [board.columns],
  )
  const columnIdsKey = columnIds.join(',')

  const [openColumns, setOpenColumns] = useState<string[]>([])

  useEffect(() => {
    setOpenColumns((prev) => {
      const preserved = prev.filter((id) => columnIds.includes(id))
      const added = columnIds.filter((id) => !preserved.includes(id))
      if (preserved.length === 0 && added.length > 0) {
        return columnIds
      }
      return [...preserved, ...added]
    })
  }, [columnIdsKey, columnIds])

  const isDragging = activeDomain != null

  function handleExpandColumn(columnId: string) {
    setOpenColumns((prev) =>
      prev.includes(columnId) ? prev : [...prev, columnId],
    )
  }

  return (
    <DragContextProvider
      disabled={dragDisabled}
      onDragStart={onDragStart}
      onDragEnd={onDragEnd}
      overlay={
        activeDomain ? (
          <DomainRow
            domain={activeDomain}
            serviceLabels={serviceLabelsByDomain?.get(activeDomain.id)}
            dragDisabled
            overlay
          />
        ) : null
      }
    >
      <AppAccordion
        multiple
        value={openColumns}
        onValueChange={setOpenColumns}
        className="grid w-full grid-cols-1 gap-2 lg:grid-cols-2"
      >
        {board.columns.map((column) => (
          <DomainGroupItem
            key={column.id}
            column={column}
            isOpen={openColumns.includes(column.id)}
            isDragging={isDragging}
            onExpandColumn={handleExpandColumn}
            onEditGroup={onEditGroup}
            onDeleteGroup={onDeleteGroup}
            dragDisabled={dragDisabled}
            serviceLabelsByDomain={serviceLabelsByDomain}
          />
        ))}
      </AppAccordion>
    </DragContextProvider>
  )
}