import { jsx, jsxs } from 'react/jsx-runtime';
import { useCallback, useMemo } from 'react';
import { z } from 'zod';
import { useLayerStore } from '../../../lib/ui-builder/store/layer-store.mjs';
import { Button } from '../../button.mjs';
import AutoForm from '../../auto-form/index.mjs';
import { addDefaultValues } from '../../../lib/ui-builder/store/schema-utils.mjs';

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

export { ConfigPanel, PageLayerForm as default };
