'use strict';
'use client';
import { c } from 'react/compiler-runtime';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState } from 'react';
import { useAsyncEffect } from '../../../fd-toolbox/hooks/use-async-effect.js';
import { StatusBoardStatusComponent } from './status-board-status/StatusBoardStatus.js';
import { onInit, onDragEnd } from './StatusBoard.funcs.js';
import { DragDropContext } from '../../fd-component-toolbox/drag-and-drop/DragDropContext.js';
import Droppable from '../../fd-component-toolbox/drag-and-drop/Droppable.js';
import { Draggable } from '../../fd-component-toolbox/drag-and-drop/Draggable.js';
import { droppableIdConsts } from './status-board-constants.js';
import { useSetTitle } from '../../meta/page/use-set-title.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
const pageTitle = "Status Board";
function StatusBoard() {
  const $ = c(8);
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = [];
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  const [statusBoardData, setStatusBoardData] = useState(t0);
  useSetTitle(pageTitle);
  let t1;
  let t2;
  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = async () => {
      await onInit(setStatusBoardData);
    };
    t2 = [];
    $[1] = t1;
    $[2] = t2;
  } else {
    t1 = $[1];
    t2 = $[2];
  }
  useAsyncEffect(t1, t2);
  let t3;
  if ($[3] !== statusBoardData) {
    t3 = result => onDragEnd(result, {
      statusBoardData,
      setStatusBoardData
    });
    $[3] = statusBoardData;
    $[4] = t3;
  } else {
    t3 = $[4];
  }
  let t4;
  if ($[5] !== statusBoardData || $[6] !== t3) {
    t4 = jsx(DragDropContext, {
      onDragEnd: t3,
      children: jsx("div", {
        className: "m-7 flex flex-row",
        children: statusBoardData.length > 0 ? jsx(Droppable, {
          droppableId: droppableIdConsts.statusBoard,
          children: jsx("div", {
            className: "flex flex-row",
            children: statusBoardData.map(_temp)
          })
        }) : jsx("div", {
          className: "flex size-full items-center justify-center",
          children: jsxs("div", {
            className: "text-center",
            children: [jsx("div", {
              className: "mx-auto size-16 animate-spin rounded-full border-4 border-dashed"
            }), jsx("h2", {
              className: "mt-4 text-zinc-900 dark:text-white",
              children: "Loading..."
            }), jsx("p", {
              className: "text-zinc-600 dark:text-zinc-400",
              children: "We are pulling in your data"
            })]
          })
        })
      })
    });
    $[5] = statusBoardData;
    $[6] = t3;
    $[7] = t4;
  } else {
    t4 = $[7];
  }
  return t4;
}
function _temp(status) {
  return jsx(Draggable, {
    draggableId: status.id,
    children: jsx("div", {
      className: "mr-4",
      children: jsx(StatusBoardStatusComponent, {
        droppableId: status.id,
        name: status.name,
        statusBoardItemList: status.statusBoardItemList ?? []
      })
    })
  }, status.id);
}
__name(StatusBoard, "StatusBoard");

export { StatusBoard };
