/**
 * DesignPanel — Left-side design settings panel for Multi-Step mode.
 *
 * @package ArraySubsPro
 */
import React from "react";
import { __ } from "@wordpress/i18n";
import Form from "rc-field-form";
import FormBuilder from "@libs/form-builder";
import { DEFAULT_DESIGN } from "./utils";

const DesignPanel = ({ design, onChange }) => {
  const [form] = Form.useForm();

  const handleChange = (changedValues, allValues) => {
    onChange({ ...design, ...allValues });
  };

  const formItems = [
    {
      field: "Title",
      text: __("Design Settings", "arraysubs"),
      heading: 4,
    },
    {
      field: "Accordion",
      multiple: true,
      items: [
        {
          label: __("Colors", "arraysubs"),
          key: "colors",
          children: [
            {
              field: "Select",
              name: "color_scheme",
              label: __("Color Scheme", "arraysubs"),
              data: [
                { value: "light", label: __("Light", "arraysubs") },
                { value: "dark", label: __("Dark", "arraysubs") },
                { value: "custom", label: __("Custom", "arraysubs") },
              ],
            },
            {
              field: "Color",
              name: "primary_color",
              label: __("Primary Color", "arraysubs"),
              showWhen: {
                field: "color_scheme",
                operator: "=",
                value: "custom",
              },
            },
            {
              field: "Color",
              name: "secondary_color",
              label: __("Secondary Color", "arraysubs"),
              showWhen: {
                field: "color_scheme",
                operator: "=",
                value: "custom",
              },
            },
            {
              field: "Color",
              name: "accent_color",
              label: __("Accent Color", "arraysubs"),
              showWhen: {
                field: "color_scheme",
                operator: "=",
                value: "custom",
              },
            },
            {
              field: "Color",
              name: "error_color",
              label: __("Error Color", "arraysubs"),
              showWhen: {
                field: "color_scheme",
                operator: "=",
                value: "custom",
              },
            },
            {
              field: "Color",
              name: "background_color",
              label: __("Background Color", "arraysubs"),
              showWhen: {
                field: "color_scheme",
                operator: "=",
                value: "custom",
              },
            },
            {
              field: "Color",
              name: "text_color",
              label: __("Text Color", "arraysubs"),
              showWhen: {
                field: "color_scheme",
                operator: "=",
                value: "custom",
              },
            },
          ],
        },
        {
          label: __("Layout", "arraysubs"),
          key: "layout",
          children: [
            {
              field: "Select",
              name: "container_width",
              label: __("Container Width", "arraysubs"),
              data: [
                { value: "narrow", label: __("Narrow (680px)", "arraysubs") },
                { value: "medium", label: __("Medium (860px)", "arraysubs") },
                { value: "wide", label: __("Wide (1080px)", "arraysubs") },
                { value: "full", label: __("Full Width", "arraysubs") },
                { value: "custom", label: __("Custom", "arraysubs") },
              ],
            },
            {
              field: "Text",
              name: "container_max_width",
              label: __("Custom Max Width", "arraysubs"),
              placeholder: "e.g. 900px, 60rem",
              help: __("CSS value with unit (px, rem, etc.)", "arraysubs"),
              showWhen: {
                field: "container_width",
                operator: "=",
                value: "custom",
              },
            },
            {
              field: "Number",
              name: "border_radius",
              label: __("Border Radius (px)", "arraysubs"),
              min: 0,
              max: 24,
            },
            {
              field: "Select",
              name: "spacing",
              label: __("Spacing", "arraysubs"),
              data: [
                { value: "compact", label: __("Compact", "arraysubs") },
                {
                  value: "comfortable",
                  label: __("Comfortable", "arraysubs"),
                },
                { value: "spacious", label: __("Spacious", "arraysubs") },
              ],
            },
          ],
        },
        {
          label: __("Steps", "arraysubs"),
          key: "steps",
          children: [
            {
              field: "Select",
              name: "step_position",
              label: __("Navigation Position", "arraysubs"),
              data: [
                { value: "top", label: __("Top (Horizontal)", "arraysubs") },
                { value: "left", label: __("Left (Sidebar)", "arraysubs") },
                { value: "hidden", label: __("Hidden", "arraysubs") },
              ],
            },
            {
              field: "Select",
              name: "step_indicator_style",
              label: __("Step Indicator", "arraysubs"),
              data: [
                { value: "numbers", label: __("Numbers", "arraysubs") },
                { value: "dots", label: __("Dots", "arraysubs") },
                {
                  value: "progress-bar",
                  label: __("Progress Bar", "arraysubs"),
                },
              ],
            },
          ],
        },
      ],
    },
  ];

  return (
    <div className="arraysubs-cb-design-panel">
      <Form
        form={form}
        initialValues={{ ...DEFAULT_DESIGN, ...design }}
        onValuesChange={handleChange}
        layout="vertical"
      >
        <FormBuilder formItems={formItems} form={form} />
      </Form>
    </div>
  );
};

export default DesignPanel;