'use strict';
import { jsx, jsxs } from 'react/jsx-runtime';
import React, { useContext, useState, useRef, useImperativeHandle } from 'react';
import { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription, DialogClose } from '../../../../fd-component-toolbox/dialog/Dialog.js';
import { Button } from '../../../../fd-component-toolbox/button/Button.js';
import { Icon, iconSizes, iconNames } from '../../../../fd-component-toolbox/icon/Icon.js';
import { addPaging } from '../../../../../fd-toolbox/odata/odataconfig.js';
import { rowHighlightBehaviors } from '../../../../../fd-toolbox/enums/enums.js';
import { useAsyncEffect } from '../../../../../fd-toolbox/hooks/use-async-effect.js';
import { ResourceFilterList } from '../../../filtering/resource-filter-list/ResourceFilterList.js';
import { Table } from '../../../table/Table.js';
import { initBaseMultiBrowserDialog, onBrowserTablePaging, refreshRightResources, onMoveResourcesFromLeftToRightFunc, moveAllResourcesFromLeftTable, onResourceClickFunc, onMoveResourcesFromRightToLeftFunc, moveAllResourcesFromRightTable, setResourceFilterListRef, onSortCallbackFunc, onTriggerClickHandler, getMultiBrowserLeftTableId, getMultiBrowserMoveResourcesToRightTableId, getMultiBrowserMoveResourcesToLeftTableId, getMultiBrowserRightTableId, getMultiBrowserOkButtonId, onMultiBrowserDialogOpenChange } from './BaseMultiBrowserDialog.funcs.js';
import { goBack } from '../../../../../fd-toolbox/routing/routers.js';
import { oDataDefaultTop } from '../../../../../fd-toolbox/odata/odata-constants.js';
import { useEmptyRef } from '../../../../../fd-toolbox/hooks/use-empty-ref.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
const InstanceNumberContext = React.createContext(0);
const tableConfig = {
  hideDeleteButton: true,
  maxNumberOfColumns: 4,
  multiSelect: true,
  disableCellNavigationLinks: true
};
function BaseMultiBrowserDialog({
  data,
  trigger,
  onCloseDialog: closeDialog,
  disabled,
  onTriggerClick,
  ref
}) {
  const instanceNumber = useContext(InstanceNumberContext);
  const leftTable = useEmptyRef();
  const rightTable = useEmptyRef();
  const [leftResources, setLeftResources] = useState([]);
  const [rightResources, setRightResources] = useState([]);
  const [browserDialogTitle, setBrowserDialogTitle] = useState("");
  const [resourceMeta, setResourceMeta] = useState();
  const [uiResourceMeta, setUiResourceMeta] = useState();
  const [dialogOpened, setDialogOpened] = useState(false);
  const [leftPageSize, setLeftPageSize] = useState(oDataDefaultTop);
  const [rightPageSize, setRightPageSize] = useState(oDataDefaultTop);
  const [leftODataConfig, setLeftODataConfig] = useState(addPaging({}, leftPageSize));
  const [rightODataConfig, setRightODataConfig] = useState(addPaging({}, rightPageSize));
  const [isComponentRefSet, setIsComponentRefSet] = useState(false);
  const [isRightResourcesLoading, setIsRightResourcesLoading] = useState(true);
  const resourceFilterListComponentRef = useRef(void 0);
  useAsyncEffect(async () => {
    if (data.relatedResourcePropertyMeta) await initBaseMultiBrowserDialog(data, setBrowserDialogTitle, setLeftResources, setResourceMeta, setUiResourceMeta);
  }, [data.selectedResources.length, data.relatedResourcePropertyMeta]);
  const areResourcesSet = !!(data && (rightResources || leftResources));
  const onPagingRightTable = /* @__PURE__ */__name(async fdTablePaging => onBrowserTablePaging(rightODataConfig, setRightODataConfig, setRightPageSize, fdTablePaging, resourceMeta, refreshRightResources, data, leftResources, setRightResources, resourceFilterListComponentRef.current ?? void 0), "onPagingRightTable");
  const onPagingLeftTable = /* @__PURE__ */__name(async fdTablePaging_0 => onBrowserTablePaging(leftODataConfig, setLeftODataConfig, setLeftPageSize, fdTablePaging_0, resourceMeta), "onPagingLeftTable");
  const onRefreshRightTable = /* @__PURE__ */__name(async () => refreshRightResources(data, leftResources, setRightResources, rightODataConfig, resourceMeta, setIsRightResourcesLoading, resourceFilterListComponentRef.current ?? void 0), "onRefreshRightTable");
  useAsyncEffect(async () => {
    if (resourceMeta?.properties && isComponentRefSet) await onRefreshRightTable();
  }, [resourceMeta, isComponentRefSet, onRefreshRightTable]);
  const onMoveResourcesFromLeftToRight = /* @__PURE__ */__name(() => onMoveResourcesFromLeftToRightFunc(leftResources, setLeftResources, rightResources, setRightResources, data, leftTable.current ?? void 0), "onMoveResourcesFromLeftToRight");
  const onMoveAllResourcesFromLeftToRight = /* @__PURE__ */__name(() => moveAllResourcesFromLeftTable(leftResources, setLeftResources, rightResources, setRightResources), "onMoveAllResourcesFromLeftToRight");
  const onResourceClick = /* @__PURE__ */__name(resource => onResourceClickFunc(resource, leftResources, setLeftResources, rightResources, setRightResources, leftTable.current ?? void 0, rightTable.current ?? void 0), "onResourceClick");
  const onMoveResourcesFromRightToLeft = /* @__PURE__ */__name(() => onMoveResourcesFromRightToLeftFunc(leftResources, setLeftResources, rightResources, setRightResources, rightTable.current ?? void 0), "onMoveResourcesFromRightToLeft");
  const onMoveAllResourcesFromRightToLeft = /* @__PURE__ */__name(() => moveAllResourcesFromRightTable(leftResources, setLeftResources, rightResources, setRightResources), "onMoveAllResourcesFromRightToLeft");
  const onCloseDialogWithoutSelected = /* @__PURE__ */__name(() => closeDialog([]), "onCloseDialogWithoutSelected");
  useImperativeHandle(ref, () => ({
    resetDialog() {
      onMoveAllResourcesFromLeftToRight();
    }
  }));
  const setRef = /* @__PURE__ */__name(component => setResourceFilterListRef(component, resourceFilterListComponentRef, setIsComponentRefSet), "setRef");
  const onSortCallback = /* @__PURE__ */__name(async tableSort => onSortCallbackFunc(tableSort, data, leftResources, setRightResources, rightODataConfig, setIsRightResourcesLoading, resourceMeta, resourceFilterListComponentRef.current ?? void 0), "onSortCallback");
  return /* @__PURE__ */jsx(InstanceNumberContext.Provider, {
    value: instanceNumber + 1,
    children: /* @__PURE__ */jsxs(Dialog, {
      open: !disabled && dialogOpened,
      onOpenChange: value => onMultiBrowserDialogOpenChange(value, leftResources, closeDialog, setDialogOpened),
      modal: true,
      children: [/* @__PURE__ */jsx(DialogTrigger, {
        className: "inline-flex size-4 items-center justify-center focus:outline-none focus-visible:ring-0",
        nativeButton: false,
        render: props => /* @__PURE__ */jsx("div", {
          ...props,
          onClick: event => onTriggerClickHandler(event, props.onClick, onTriggerClick),
          children: trigger
        })
      }), /* @__PURE__ */jsxs(DialogContent, {
        className: "min-w-full gap-4 overflow-auto rounded-none sm:min-w-[92%] sm:rounded lg:min-w-[87%]",
        children: [/* @__PURE__ */jsx(DialogTitle, {
          className: "flex w-full flex-col items-start justify-between pl-1",
          children: browserDialogTitle
        }), /* @__PURE__ */jsx(DialogDescription, {
          className: "sr-only"
        }), /* @__PURE__ */jsx("div", {
          children: /* @__PURE__ */jsx(ResourceFilterList, {
            config: {
              showRefreshButton: true,
              showResetButton: false
            },
            ref: setRef,
            uiResourceMeta,
            stateKey: `${ResourceFilterList.displayName}_${resourceMeta?.id}_multiBrowser_${instanceNumber}`,
            onFilterChange: onRefreshRightTable
          })
        }), areResourcesSet && /* @__PURE__ */jsxs("div", {
          className: "grid max-h-108 w-full grid-cols-[1fr_auto_1fr] items-stretch justify-between overflow-x-auto",
          children: [/* @__PURE__ */jsx("div", {
            className: "overflow-auto",
            children: /* @__PURE__ */jsx(Table, {
              id: getMultiBrowserLeftTableId(instanceNumber),
              uiResourceMeta,
              onPaging: onPagingLeftTable,
              tableConfig: {
                ...tableConfig,
                readonly: true,
                pageSize: leftPageSize,
                rowHighlightBehavior: rowHighlightBehaviors.pointer,
                className: "h-96"
              },
              items: leftResources,
              ref: leftTable,
              onRowClick: onResourceClick
            })
          }), /* @__PURE__ */jsxs("div", {
            className: "mx-7 flex flex-col justify-center gap-2",
            children: [/* @__PURE__ */jsx(Button, {
              id: getMultiBrowserMoveResourcesToRightTableId(instanceNumber),
              onClick: onMoveAllResourcesFromLeftToRight,
              variant: "ghost",
              size: "icon",
              children: /* @__PURE__ */jsx(Icon, {
                name: iconNames.doubleArrowRight,
                size: iconSizes.medium
              })
            }), /* @__PURE__ */jsx(Button, {
              id: getMultiBrowserMoveResourcesToRightTableId(instanceNumber),
              onClick: onMoveResourcesFromLeftToRight,
              variant: "ghost",
              size: "icon",
              children: /* @__PURE__ */jsx(Icon, {
                name: iconNames.arrowRight
              })
            }), /* @__PURE__ */jsx(Button, {
              id: getMultiBrowserMoveResourcesToLeftTableId(instanceNumber),
              onClick: onMoveResourcesFromRightToLeft,
              variant: "ghost",
              size: "icon",
              children: /* @__PURE__ */jsx(Icon, {
                name: iconNames.arrowLeft,
                onClick: goBack
              })
            }), /* @__PURE__ */jsx(Button, {
              id: getMultiBrowserMoveResourcesToLeftTableId(instanceNumber),
              onClick: onMoveAllResourcesFromRightToLeft,
              variant: "ghost",
              size: "icon",
              children: /* @__PURE__ */jsx(Icon, {
                name: iconNames.doubleArrowLeft,
                size: iconSizes.medium
              })
            })]
          }), /* @__PURE__ */jsx("div", {
            className: "overflow-auto",
            children: /* @__PURE__ */jsx(Table, {
              id: getMultiBrowserRightTableId(instanceNumber),
              uiResourceMeta,
              onPaging: onPagingRightTable,
              items: rightResources,
              tableConfig: {
                ...tableConfig,
                readonly: true,
                externalSorting: true,
                pageSize: rightPageSize,
                rowHighlightBehavior: rowHighlightBehaviors.pointer,
                className: "h-96"
              },
              ref: rightTable,
              onRowClick: onResourceClick,
              loading: isRightResourcesLoading,
              onSort: onSortCallback
            })
          })]
        }), /* @__PURE__ */jsxs("div", {
          className: "flex items-end justify-end space-x-2",
          children: [/* @__PURE__ */jsx(DialogClose, {
            render: /* @__PURE__ */jsx(Button, {
              id: getMultiBrowserOkButtonId(instanceNumber),
              onClick: () => closeDialog(leftResources),
              children: "Ok"
            })
          }), /* @__PURE__ */jsx(Button, {
            id: `clearBrowserButton${instanceNumber}`,
            onClick: onMoveAllResourcesFromLeftToRight,
            variant: "outline",
            children: "Clear"
          }), /* @__PURE__ */jsx(DialogClose, {
            render: /* @__PURE__ */jsx(Button, {
              id: `cancelBrowserButton${instanceNumber}`,
              onClick: onCloseDialogWithoutSelected,
              variant: "outline",
              children: "Cancel"
            })
          })]
        })]
      })]
    })
  });
}
__name(BaseMultiBrowserDialog, "BaseMultiBrowserDialog");
BaseMultiBrowserDialog.displayName = "BaseMultiBrowserDialog";

export { BaseMultiBrowserDialog };
