/**
 * WordPress dependencies
 */
import React from "react";
import { useDispatch, useSelect } from "@wordpress/data";
import { __ } from "@wordpress/i18n";
import {
  useBlockEditContext,
  __experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
  __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
} from "@wordpress/block-editor";

/**
 * Internal dependencies
 */
import { ColorSettingsWithGradientWithToolsPanelProps } from "./types";

/**
 * Color settings with gradient component with ToolsPanel integration
 * Passes panelId to ColorGradientSettingsDropdown so it registers as a ToolsPanelItem
 * automatically inside an InspectorControls group="color" slot
 */
const ColorSettingsWithGradientWithToolsPanel: React.FC<
  ColorSettingsWithGradientWithToolsPanelProps
> = ({ label, attrBackgroundKey, attrGradientKey }) => {
  const { clientId } = useBlockEditContext();
  const { updateBlockAttributes } = useDispatch("core/block-editor") as any;

  const attributes = useSelect((select) => {
    return select("core/block-editor").getBlockAttributes(clientId);
  }) as Record<string, any>;

  const setAttributes = (newAttributes: Record<string, any>) =>
    updateBlockAttributes(clientId, newAttributes);

  const colorGradientSettings = useMultipleOriginColorsAndGradients();

  const { defaultColors, defaultGradients } = useSelect((select) => {
    return {
      defaultColors:
        select("core/block-editor")?.getSettings()?.__experimentalFeatures
          ?.color?.palette?.default,
      defaultGradients:
        select("core/block-editor")?.getSettings()?.__experimentalFeatures
          ?.color?.gradients?.default,
    };
  }) as { defaultColors: any; defaultGradients: any };

  const mergedColors = [
    ...(colorGradientSettings.colors || []),
    ...(defaultColors
      ? [
          {
            name: "Default",
            slug: "default",
            colors: defaultColors,
          },
        ]
      : []),
  ];

  const mergedGradients = [
    ...(colorGradientSettings.gradients || []),
    ...(defaultGradients
      ? [
          {
            name: "Default",
            slug: "default",
            gradients: defaultGradients,
          },
        ]
      : []),
  ];

  return (
    <ColorGradientSettingsDropdown
      {...colorGradientSettings}
      colors={mergedColors}
      gradients={mergedGradients}
      enableAlpha
      title={__("Color Settings", "sliderberg")}
      panelId={clientId}
      popoverProps={{
        placement: "left start",
      }}
      settings={[
        {
          clearable: true,
          colorValue: attributes[attrBackgroundKey],
          gradientValue: attributes[attrGradientKey],
          label: label,
          onColorChange: (newValue: any) =>
            setAttributes({
              [attrBackgroundKey]: newValue,
            }),
          onGradientChange: (newValue: any) =>
            setAttributes({
              [attrGradientKey]: newValue,
            }),
        },
      ]}
    />
  );
};

export default ColorSettingsWithGradientWithToolsPanel;