'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const z = require('zod');
const layerStore = require('../../../lib/ui-builder/store/layer-store.cjs');
const button = require('../../button.cjs');
const index = require('../../auto-form/index.cjs');
const schemaUtils = require('../../../lib/ui-builder/store/schema-utils.cjs');

const ConfigPanel = () => {
  const {
    selectedPageId,
    findLayerById,
    removeLayer,
    duplicateLayer,
    updateLayer,
    pages
  } = layerStore.useLayerStore();
  const selectedLayer = findLayerById(selectedPageId);
  const handleDeleteLayer = React.useCallback(
    (layerId) => {
      removeLayer(layerId);
    },
    [removeLayer]
  );
  const handleDuplicateLayer = React.useCallback(() => {
    if (selectedLayer) {
      duplicateLayer(selectedLayer.id);
    }
  }, [selectedLayer, duplicateLayer]);
  const handleUpdateLayerProps = React.useCallback(
    (id, props, rest) => {
      updateLayer(id, props, rest);
    },
    [updateLayer]
  );
  return /* @__PURE__ */ jsxRuntime.jsx(
    PageLayerForm,
    {
      selectedLayer,
      removeLayer: handleDeleteLayer,
      duplicateLayer: handleDuplicateLayer,
      updateLayerProps: handleUpdateLayerProps,
      allowDelete: pages.length > 1
    }
  );
};
const PageLayerForm = ({
  selectedLayer,
  removeLayer,
  duplicateLayer,
  updateLayerProps,
  allowDelete
}) => {
  const schema = React.useMemo(() => z.z.object({
    name: z.z.string().min(1, "Name is required")
  }), []);
  const handleSetValues = React.useCallback(
    (data) => {
      const { name } = data;
      const mergedValues = { ...selectedLayer, name, props: {} };
      const { props, ...rest } = mergedValues;
      updateLayerProps(selectedLayer.id, props, rest);
    },
    [selectedLayer, updateLayerProps]
  );
  const formSchema = React.useMemo(() => schemaUtils.addDefaultValues(schema, {
    name: selectedLayer.name
  }), [selectedLayer, schema]);
  const values = React.useMemo(() => ({
    name: selectedLayer.name
  }), [selectedLayer]);
  const fieldConfig = React.useMemo(() => ({
    name: {
      inputProps: {
        value: selectedLayer.name
        // defaultValue: selectedLayer.name,
      }
    }
  }), [selectedLayer]);
  const handleDuplicateLayer = React.useCallback(() => {
    duplicateLayer(selectedLayer.id);
  }, [selectedLayer, duplicateLayer]);
  const handleRemoveLayer = React.useCallback(() => {
    removeLayer(selectedLayer.id);
  }, [selectedLayer, removeLayer]);
  return /* @__PURE__ */ jsxRuntime.jsxs(
    index,
    {
      formSchema,
      onValuesChange: handleSetValues,
      values,
      fieldConfig,
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          button.Button,
          {
            type: "button",
            variant: "secondary",
            className: "mt-4 w-full",
            onClick: handleDuplicateLayer,
            children: "Duplicate Page"
          }
        ),
        allowDelete && /* @__PURE__ */ jsxRuntime.jsx(
          button.Button,
          {
            type: "button",
            variant: "destructive",
            className: "mt-4 w-full",
            onClick: handleRemoveLayer,
            children: "Delete Page"
          }
        )
      ]
    }
  );
};

exports.ConfigPanel = ConfigPanel;
exports.default = PageLayerForm;
