'use strict';
import { c } from 'react/compiler-runtime';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import { useAsyncEffect } from '../../../../fd-toolbox/hooks/use-async-effect.js';
import { Icon, iconNames } from '../../../fd-component-toolbox/icon/Icon.js';
import { Button } from '../../../fd-component-toolbox/button/Button.js';
import { loadEditLinkRelatedResource, addEditLinkNewResource, deleteEditLinkResource } from './EditLink.funcs.js';
import { EditLinkResource } from './EditLinkResource.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function EditLink(t0) {
  const $ = c(18);
  const {
    property,
    resourceId
  } = t0;
  const [showList, setShowList] = useState(false);
  const [resources, setResources] = useState();
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = [];
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  const [isNew, setIsNew] = useState(t1);
  let t2;
  if ($[1] !== property.relation || $[2] !== resourceId || $[3] !== resources || $[4] !== showList) {
    t2 = async () => {
      await loadEditLinkRelatedResource(showList, resourceId, setResources, property.relation, resources);
    };
    $[1] = property.relation;
    $[2] = resourceId;
    $[3] = resources;
    $[4] = showList;
    $[5] = t2;
  } else {
    t2 = $[5];
  }
  let t3;
  if ($[6] !== property || $[7] !== resources || $[8] !== showList) {
    t3 = [property, showList, resources];
    $[6] = property;
    $[7] = resources;
    $[8] = showList;
    $[9] = t3;
  } else {
    t3 = $[9];
  }
  useAsyncEffect(t2, t3);
  if (!property.relation) {
    return void 0;
  }
  let t4;
  if ($[10] !== isNew || $[11] !== property.displayName || $[12] !== property.relation || $[13] !== resources || $[14] !== showList) {
    let t5;
    if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
      t5 = () => setShowList(_temp);
      $[16] = t5;
    } else {
      t5 = $[16];
    }
    let t6;
    if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
      t6 = () => addEditLinkNewResource(setResources, setIsNew);
      $[17] = t6;
    } else {
      t6 = $[17];
    }
    t4 = jsxs("div", {
      children: [jsxs("div", {
        className: "flex flex-row",
        children: [jsxs("span", {
          className: "flex cursor-pointer flex-row gap-1",
          onClick: t5,
          children: [property.displayName, showList ? jsx(Icon, {
            name: iconNames.caretDown
          }) : jsx(Icon, {
            name: iconNames.caretUp
          })]
        }), jsx(Button, {
          className: "cursor-pointer",
          size: "icon",
          variant: "icon",
          onClick: t6,
          children: jsx(Icon, {
            name: iconNames.plus,
            className: "stroke-fd-accent stroke-0.65 mt-1"
          })
        })]
      }), showList && resources?.map(t7 => {
        const {
          id
        } = t7;
        return jsx(EditLinkResource, {
          id,
          relatedResourceName: property.relation.relatedResourceName,
          isNew: isNew.includes(id),
          onDelete: deleteResourceId => deleteEditLinkResource(setResources, deleteResourceId)
        }, `EditLinkResource${id}`);
      })]
    });
    $[10] = isNew;
    $[11] = property.displayName;
    $[12] = property.relation;
    $[13] = resources;
    $[14] = showList;
    $[15] = t4;
  } else {
    t4 = $[15];
  }
  return t4;
}
function _temp(prev) {
  return !prev;
}
__name(EditLink, "EditLink");

export { EditLink };
