{"version":3,"sources":["../src/components/gui/tabs/order.tsx"],"names":["DndContext","SortableContext","useSortable","CSS","restrictToVerticalAxis","React","styled","useSetRecoilState","XGUIOrderElementsTab","selectedElement","setSelectedElement","xPage","setXPage","useXPage","xChildren","setXChildren","useXCommonChildren","indexes","DragContainer","_index","overId","activeId","old","pages","isCommon","section","activeEl","index","DraggableElement","order_default","setIndex","USE_SELECTED_INDEX","el","useXElementValue","attributes","listeners","setNodeRef","setActivatorNodeRef","transform","transition","style","target","other","otherHover","COMPONENT_READABLE_NAME","MyIcon_default"],"mappings":"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","sourcesContent":["import { DndContext } from \"@dnd-kit/core\";\nimport { SortableContext, useSortable } from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\";\nimport * as React from \"react\";\n\nimport { COMPONENT_READABLE_NAME } from \"../../../utils/constants/common/componentName\";\nimport styled from \"@emotion/styled\";\nimport Icon from \"../../core/MyIcon\";\nimport { useSetRecoilState } from \"recoil\";\nimport { TUseXElement, useXElementValue } from \"../../../hooks/useXElement\";\nimport { USE_SELECTED_INDEX } from \"../../../hooks/useSelectedElement\";\nimport { useXPage } from \"../../../hooks/useXPage\";\nimport { isCommon, useXCommonChildren } from \"../../../hooks/useXCommon\";\n\nconst XGUIOrderElementsTab: React.FC<{\n  selectedElement: TUseXElement<any>;\n  setSelectedElement: any;\n}> = ({ selectedElement, setSelectedElement }) => {\n  const { xPage, setXPage } = useXPage();\n  const { xChildren, setXChildren } = useXCommonChildren(\n    selectedElement.index as any\n  );\n\n  const indexes: string[] =\n    selectedElement.name === \"XPage\"\n      ? (xPage\n          .map((e) => {\n            console.log(e);\n\n            if (e.config) {\n              if (!e.config.childOf) return e.config.index;\n\n              return \"HIDDEN_\" + e.config.index;\n            }\n\n            return null;\n          })\n          .filter((e) => typeof e === \"string\") as string[])\n      : [...selectedElement.elementsIndexes];\n\n  return (\n    <DragContainer>\n      <DndContext\n        modifiers={[restrictToVerticalAxis]}\n        onDragEnd={(e) => {\n          if (e.over) {\n            // UPDATE SUB ELEMENT\n            if (selectedElement.name !== \"XPage\") {\n              const _index = [...indexes];\n\n              const overId = _index.indexOf(e.over.id as string);\n\n              const activeId = _index.indexOf(e.active.id as string);\n\n              _index.splice(activeId, 1);\n\n              _index.splice(overId, 0, e.active.id as string);\n\n              setSelectedElement((old: TUseXElement<any>) => ({\n                ...old,\n                elementsIndexes: _index,\n              }));\n            }\n\n            // if (isCommon(selectedElement.index)) {\n            // } else {\n            const pages = isCommon(selectedElement.index)\n              ? [...xChildren]\n              : [...xPage];\n\n            const overId = pages.findIndex((section) => {\n              if (!section.config || !e.over) return false;\n\n              return section.config.index === (e.over.id as string);\n            });\n\n            const activeId = pages.findIndex((section) => {\n              if (!section.config || !e.active) return false;\n\n              return section.config.index === (e.active.id as string);\n            });\n\n            const activeEl = pages.find((section) => {\n              if (!section.config || !e.active) return false;\n\n              return section.config.index === (e.active.id as string);\n            });\n\n            if (activeEl && activeId) {\n              pages.splice(activeId, 1);\n\n              pages.splice(overId, 0, activeEl);\n\n              if (isCommon(selectedElement.index)) {\n                setXChildren(pages);\n              } else {\n                setXPage(pages);\n              }\n            }\n            console.log(overId, activeId, activeEl, pages);\n            // }\n          }\n        }}\n      >\n        <SortableContext items={indexes}>\n          {indexes.map((index) =>\n            index.startsWith(\"HIDDEN_\") ? null : (\n              <DraggableElement index={index} key={index} />\n            )\n          )}\n        </SortableContext>\n      </DndContext>\n    </DragContainer>\n  );\n};\n\nexport default XGUIOrderElementsTab;\n\nconst DraggableElement: React.FC<{ index: string }> = ({ index }) => {\n  const setIndex = useSetRecoilState(USE_SELECTED_INDEX);\n\n  const el = useXElementValue(index);\n\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    setActivatorNodeRef,\n    transform,\n    transition,\n  } = useSortable({ id: index });\n\n  if (!el) return null;\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  };\n\n  return (\n    <li\n      ref={setNodeRef}\n      style={style}\n      {...attributes}\n      onMouseEnter={() => {\n        const target = document.getElementById(index);\n\n        if (target) target.setAttribute(\"data-x-hovered\", \"true\");\n      }}\n      onMouseLeave={() => {\n        const target = document.getElementById(index);\n\n        if (target) target.removeAttribute(\"data-x-hovered\");\n      }}\n    >\n      <a\n        onClick={() => {\n          const other = document.querySelector(\"[data-x-selected='true']\");\n\n          if (other) other.removeAttribute(\"data-x-selected\");\n\n          const otherHover = document.querySelector(\"[data-x-hovered='true']\");\n\n          if (otherHover) otherHover.removeAttribute(\"data-x-hovered\");\n\n          setIndex(index);\n        }}\n        href={`#${index}`}\n      >\n        {COMPONENT_READABLE_NAME[el.name]}\n      </a>\n      <button ref={setActivatorNodeRef} {...listeners}>\n        <Icon name=\"drag_indicator\" />\n      </button>\n    </li>\n  );\n};\n\nconst DragContainer = styled.ul`\n  padding: 0;\n  margin: 0;\n  gap: 10px;\n  display: flex;\n  flex-direction: column;\n\n  & li {\n    padding: 0;\n    list-style-type: none;\n    border-radius: 5px;\n    background-color: rgba(255, 255, 255, 0.2);\n    color: white;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    height: 40px;\n    box-sizing: border-box;\n    line-height: 1em;\n\n    a {\n      user-select: none;\n      display: flex;\n      width: 100%;\n      height: 100%;\n      color: inherit;\n      text-decoration: none;\n      align-items: center;\n      padding: 0 10px;\n    }\n\n    & button {\n      width: 20px;\n      text-align: center;\n      border: 0;\n      background-color: transparent;\n      border-radius: 3px;\n      height: 30px;\n      font-size: 15px;\n      padding: 0 5px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      color: black;\n      cursor: move;\n      color: #ffffff;\n      margin: 5px 10px;\n\n      &:hover {\n        background-color: rgba(0, 0, 0, 0.2);\n      }\n    }\n  }\n`;\n"]}