import { jsxs, jsx } from "react/jsx-runtime";
import { useUpdateEffect, useMount, useMemoizedFn } from "ahooks";
import { useState, useMemo } from "react";
import { IconChevronRight, IconChevronLeft } from "../../icons/index.mjs";
/* empty css                                                                                                                                                                                       */
/* empty css                                                                                                                                                                                        */
/* empty css                                                                                                                                                                                                */
/* empty css                                                                                                                                                                                           */
/* empty css                                                                                                                                                                                           */
import { Tree } from "../Tree/index.mjs";
import { Card } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Card/Card.mjs";
import { Box } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.mjs";
import { Stack } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Stack/Stack.mjs";
import { ActionIcon } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/ActionIcon/ActionIcon.mjs";
import { createStyles } from "../../node_modules/.pnpm/@mantine_emotion@7.15.2_@emotion_cache@11.14.0_@emotion_react@11.14.0_@types_react@18.3.18_re_vflj3eioazr6wkrxpatinf66nq/node_modules/@mantine/emotion/esm/create-styles.mjs";
const useStyles = createStyles({
  transferTree: {
    display: "flex",
    flexDirection: "row",
    gap: "2rem",
    alignItems: "stretch"
  },
  transfer: {
    flexBasis: 400,
    borderRadius: 8,
    overflow: "hidden",
    display: "flex",
    flexDirection: "column"
  },
  treeWrapper: {
    padding: "1rem",
    flex: 1,
    overflow: "auto"
  }
});
const TransferTree = ({
  sourceHeader,
  targetHeader,
  onChange,
  dataSource,
  className,
  treeProps = {},
  onCheckLeft,
  onCheckRight,
  onMoveRight,
  onMoveLeft,
  initialTargetKeys
}) => {
  const { classes, cx } = useStyles();
  const [source, setSource] = useState(dataSource);
  const [checkedSource, setCheckedSource] = useState(/* @__PURE__ */ new Set());
  const [checkedTarget, setCheckedTarget] = useState(/* @__PURE__ */ new Set());
  const [selectedNodeKeys, setSelectedNodeKeys] = useState(new Set(initialTargetKeys ?? []));
  const renderedSource = useMemo(() => {
    return filterTree(
      source,
      () => true,
      (node) => selectedNodeKeys.has(node.key) ? { ...node, disabled: true } : node
    );
  }, [source, selectedNodeKeys]);
  const renderedTarget = useMemo(() => {
    return filterTree(
      source,
      (node) => selectedNodeKeys.has(node.key) || (node.children ? node.children.some((c) => selectedNodeKeys.has(c.key)) : false)
    );
  }, [source, selectedNodeKeys]);
  const onMoveToRight = () => {
    setSelectedNodeKeys(new Set(checkedSource));
    onMoveRight == null ? void 0 : onMoveRight();
  };
  const onMoveToLeft = () => {
    setSelectedNodeKeys((prev) => new Set([...prev].filter((i) => !checkedTarget.has(i))));
    onMoveLeft == null ? void 0 : onMoveLeft();
  };
  const onCheckLeftTree = (selected, event) => {
    setCheckedSource(/* @__PURE__ */ new Set([...selected, ...event.halfCheckedKeys]));
    onCheckLeft == null ? void 0 : onCheckLeft(selected, event);
  };
  const onCheckRightTree = (selected, event) => {
    setCheckedTarget(new Set(selected));
    onCheckRight == null ? void 0 : onCheckRight(selected, event);
  };
  useUpdateEffect(() => {
    setSource(dataSource);
  }, [dataSource]);
  useUpdateEffect(() => {
    onChange == null ? void 0 : onChange(renderedTarget);
  }, [renderedTarget]);
  useMount(() => {
    if (initialTargetKeys == null ? void 0 : initialTargetKeys.length) {
      setCheckedSource(/* @__PURE__ */ new Set([...initialTargetKeys]));
    }
  });
  return /* @__PURE__ */ jsxs(Card, { withBorder: true, className: cx(classes.transferTree, className), children: [
    /* @__PURE__ */ jsxs("div", { className: classes.transfer, children: [
      sourceHeader ? sourceHeader : /* @__PURE__ */ jsx(Box, { component: "header", p: 16, sx: (theme) => ({ backgroundColor: theme.colors.carbon[3] }), children: "Source" }),
      /* @__PURE__ */ jsx("div", { className: classes.treeWrapper, children: /* @__PURE__ */ jsx(
        Tree,
        {
          ...treeProps,
          checkable: true,
          treeData: renderedSource,
          onCheck: useMemoizedFn(onCheckLeftTree),
          defaultCheckedKeys: initialTargetKeys
        }
      ) })
    ] }),
    /* @__PURE__ */ jsxs(Stack, { align: "center", justify: "center", children: [
      /* @__PURE__ */ jsx(ActionIcon, { variant: "default", disabled: checkedSource.size === 0, onClick: useMemoizedFn(onMoveToRight), children: /* @__PURE__ */ jsx(IconChevronRight, { size: 14 }) }),
      /* @__PURE__ */ jsx(ActionIcon, { variant: "default", disabled: checkedTarget.size === 0, onClick: useMemoizedFn(onMoveToLeft), children: /* @__PURE__ */ jsx(IconChevronLeft, { size: 14 }) })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: classes.transfer, children: [
      targetHeader ? targetHeader : /* @__PURE__ */ jsx(Box, { component: "header", h: 60, p: 16, sx: (theme) => ({ backgroundColor: theme.colors.carbon[3] }), children: "Target" }),
      /* @__PURE__ */ jsx("div", { className: classes.treeWrapper, children: /* @__PURE__ */ jsx(Tree, { ...treeProps, checkable: true, treeData: renderedTarget, onCheck: useMemoizedFn(onCheckRightTree) }) })
    ] })
  ] });
};
function filterTree(tree, filterFunc, updaterFunc = (i) => i) {
  return tree.filter(filterFunc).map((i) => ({ ...updaterFunc(i), children: i.children ? filterTree(i.children, filterFunc, updaterFunc) : [] }));
}
export {
  TransferTree
};
