import {
  Row
} from "./chunk-JCG2AUFJ.js";
import {
  Spinner
} from "./chunk-FR2GDOU2.js";
import {
  Pagination
} from "./chunk-BYTQQ3WU.js";
import {
  Flex
} from "./chunk-25HMMI7R.js";
import {
  TriangleArrowUpIcon
} from "./chunk-2O45FRFQ.js";
import {
  TriangleArrowDownIcon
} from "./chunk-776WBOKL.js";
import {
  Typo
} from "./chunk-PMJIFLDT.js";

// src/molecules/expand-table/index.tsx
import {
  flexRender,
  getCoreRowModel,
  useReactTable,
  getSortedRowModel,
  createColumnHelper,
  getPaginationRowModel
} from "@tanstack/react-table";
import { useCallback, useMemo, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
function ExpandTable(props) {
  const {
    data,
    columns,
    ExpandComp,
    placeholder,
    onRowClick,
    tableStyle,
    showPagination = true,
    isLoading,
    pageIndex = 0,
    pageSize = 10,
    siblingCount = 2,
    getRowStyle,
    getCellStyle
  } = props;
  const defaultAlign = "left";
  const [pagination, setPagination] = useState({
    pageIndex: pageIndex || 0,
    pageSize: pageSize || 9999
  });
  const [sorting, setSorting] = useState([]);
  const { getRowModel, getHeaderGroups, setPageIndex } = useReactTable({
    data: data || [],
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    state: {
      sorting,
      pagination
    },
    onSortingChange: setSorting,
    getPaginationRowModel: getPaginationRowModel(),
    onPaginationChange: setPagination
  });
  const gridTemplateColumns = useMemo(() => {
    return columns.map((col) => {
      var _a;
      if ((_a = col.meta) == null ? void 0 : _a.autoSize) return `minmax(${col.size || 50}px, 1fr)`;
      return `${col.size || 150}px`;
    }).join(" ");
  }, [columns]);
  const rowModels = getRowModel();
  const onChangePagination = useCallback(
    (page) => {
      setPageIndex(page - 1);
    },
    [setPageIndex]
  );
  const helpCompRender = useCallback(
    (rowLength) => {
      if (isLoading) {
        return /* @__PURE__ */ jsx(
          Flex,
          {
            align: "center",
            height: "100%",
            justify: "center",
            p: "5",
            width: "100%",
            children: /* @__PURE__ */ jsx(Spinner, {})
          }
        );
      }
      if (rowLength === 0) {
        return /* @__PURE__ */ jsx("div", { className: "tr", children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ jsx(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder");
      }
      return null;
    },
    [isLoading, placeholder]
  );
  const pageCount = useMemo(() => {
    if (!data) return 0;
    return Math.ceil(data.length / pageSize);
  }, [data, pageSize]);
  return /* @__PURE__ */ jsxs("div", { className: "expand-table-wrapper", children: [
    /* @__PURE__ */ jsxs("div", { className: "expand-table", style: tableStyle, children: [
      /* @__PURE__ */ jsx("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(
        "div",
        {
          className: "tr",
          style: { gridTemplateColumns },
          children: headerGroup.headers.map((header) => {
            var _a;
            const sortable = header.column.getCanSort();
            const sortedState = header.column.getIsSorted();
            const justifyContent = ((_a = header.column.columnDef.meta) == null ? void 0 : _a.align) || defaultAlign;
            return /* @__PURE__ */ jsx("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ jsxs(
              "button",
              {
                onClick: header.column.getToggleSortingHandler(),
                style: sortable ? { cursor: "pointer" } : { cursor: "default" },
                type: "button",
                children: [
                  /* @__PURE__ */ jsx(Typo, { as: "div", variant: "body", children: flexRender(
                    header.column.columnDef.header,
                    header.getContext()
                  ) }),
                  sortable ? /* @__PURE__ */ jsxs(
                    Flex,
                    {
                      direction: "column",
                      style: { marginLeft: "var(--space-2)" },
                      children: [
                        /* @__PURE__ */ jsx(
                          TriangleArrowUpIcon,
                          {
                            color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
                          }
                        ),
                        /* @__PURE__ */ jsx(
                          TriangleArrowDownIcon,
                          {
                            color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
                          }
                        )
                      ]
                    }
                  ) : null
                ]
              }
            ) }, header.id);
          })
        },
        headerGroup.id
      )) }),
      /* @__PURE__ */ jsx("div", { className: "tbody", children: helpCompRender(rowModels.rows.length) || rowModels.rows.map((row) => {
        return /* @__PURE__ */ jsx(
          Row,
          {
            ExpandComp,
            defaultAlign,
            getCellStyle,
            getRowStyle,
            gridTemplateColumns,
            onRowClick,
            row
          },
          `row_${row.id}`
        );
      }) })
    ] }),
    showPagination ? /* @__PURE__ */ jsx(Flex, { justify: "end", pt: "3", width: "100%", children: /* @__PURE__ */ jsx(
      Pagination,
      {
        count: pageCount,
        onChange: onChangePagination,
        page: pagination.pageIndex + 1,
        siblingCount
      }
    ) }) : null
  ] });
}

export {
  createColumnHelper,
  ExpandTable
};
//# sourceMappingURL=chunk-WO3VZ5FO.js.map