import { createElement } from "react";
/**
 * WordPress dependencies
 */
import { __, sprintf } from '@wordpress/i18n';
import { useInstanceId } from '@wordpress/compose';
import { useCallback, useMemo } from '@wordpress/element';
import deprecated from '@wordpress/deprecated';

/**
 * Internal dependencies
 */
import CircularOptionPicker from '../circular-option-picker';
import CustomGradientPicker from '../custom-gradient-picker';
import { VStack } from '../v-stack';
import { ColorHeading } from '../color-palette/styles';
import { Spacer } from '../spacer';
// The Multiple Origin Gradients have a `gradients` property (an array of
// gradient objects), while Single Origin ones have a `gradient` property.
const isMultipleOriginObject = obj => Array.isArray(obj.gradients) && !('gradient' in obj);
const isMultipleOriginArray = arr => {
  return arr.length > 0 && arr.every(gradientObj => isMultipleOriginObject(gradientObj));
};
function SingleOrigin({
  className,
  clearGradient,
  gradients,
  onChange,
  value,
  ...additionalProps
}) {
  const gradientOptions = useMemo(() => {
    return gradients.map(({
      gradient,
      name,
      slug
    }, index) => createElement(CircularOptionPicker.Option, {
      key: slug,
      value: gradient,
      isSelected: value === gradient,
      tooltipText: name ||
      // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
      sprintf(__('Gradient code: %s'), gradient),
      style: {
        color: 'rgba( 0,0,0,0 )',
        background: gradient
      },
      onClick: value === gradient ? clearGradient : () => onChange(gradient, index),
      "aria-label": name ?
      // translators: %s: The name of the gradient e.g: "Angular red to blue".
      sprintf(__('Gradient: %s'), name) :
      // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);".
      sprintf(__('Gradient code: %s'), gradient)
    }));
  }, [gradients, value, onChange, clearGradient]);
  return createElement(CircularOptionPicker.OptionGroup, {
    className: className,
    options: gradientOptions,
    ...additionalProps
  });
}
function MultipleOrigin({
  className,
  clearGradient,
  gradients,
  onChange,
  value,
  headingLevel
}) {
  const instanceId = useInstanceId(MultipleOrigin);
  return createElement(VStack, {
    spacing: 3,
    className: className
  }, gradients.map(({
    name,
    gradients: gradientSet
  }, index) => {
    const id = `color-palette-${instanceId}-${index}`;
    return createElement(VStack, {
      spacing: 2,
      key: index
    }, createElement(ColorHeading, {
      level: headingLevel,
      id: id
    }, name), createElement(SingleOrigin, {
      clearGradient: clearGradient,
      gradients: gradientSet,
      onChange: gradient => onChange(gradient, index),
      value: value,
      "aria-labelledby": id
    }));
  }));
}
function Component(props) {
  const {
    asButtons,
    loop,
    actions,
    headingLevel,
    'aria-label': ariaLabel,
    'aria-labelledby': ariaLabelledby,
    ...additionalProps
  } = props;
  const options = isMultipleOriginArray(props.gradients) ? createElement(MultipleOrigin, {
    headingLevel: headingLevel,
    ...additionalProps
  }) : createElement(SingleOrigin, {
    ...additionalProps
  });
  let metaProps;
  if (asButtons) {
    metaProps = {
      asButtons: true
    };
  } else {
    const _metaProps = {
      asButtons: false,
      loop
    };
    if (ariaLabel) {
      metaProps = {
        ..._metaProps,
        'aria-label': ariaLabel
      };
    } else if (ariaLabelledby) {
      metaProps = {
        ..._metaProps,
        'aria-labelledby': ariaLabelledby
      };
    } else {
      metaProps = {
        ..._metaProps,
        'aria-label': __('Custom color picker.')
      };
    }
  }
  return createElement(CircularOptionPicker, {
    ...metaProps,
    actions: actions,
    options: options
  });
}

/**
 *  GradientPicker is a React component that renders a color gradient picker to
 * define a multi step gradient. There's either a _linear_ or a _radial_ type
 * available.
 *
 * ```jsx
 *import { GradientPicker } from '@wordpress/components';
 *import { useState } from '@wordpress/element';
 *
 *const myGradientPicker = () => {
 *	const [ gradient, setGradient ] = useState( null );
 *
 *	return (
 *		<GradientPicker
 *			__nextHasNoMargin
 *			value={ gradient }
 *			onChange={ ( currentGradient ) => setGradient( currentGradient ) }
 *			gradients={ [
 *				{
 *					name: 'JShine',
 *					gradient:
 *						'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',
 *					slug: 'jshine',
 *				},
 *				{
 *					name: 'Moonlit Asteroid',
 *					gradient:
 *						'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',
 *					slug: 'moonlit-asteroid',
 *				},
 *				{
 *					name: 'Rastafarie',
 *					gradient:
 *						'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',
 *					slug: 'rastafari',
 *				},
 *			] }
 *		/>
 *	);
 *};
 *```
 *
 */
export function GradientPicker({
  /** Start opting into the new margin-free styles that will become the default in a future version. */
  __nextHasNoMargin = false,
  className,
  gradients = [],
  onChange,
  value,
  clearable = true,
  disableCustomGradients = false,
  __experimentalIsRenderedInSidebar,
  headingLevel = 2,
  ...additionalProps
}) {
  const clearGradient = useCallback(() => onChange(undefined), [onChange]);
  if (!__nextHasNoMargin) {
    deprecated('Outer margin styles for wp.components.GradientPicker', {
      since: '6.1',
      version: '6.4',
      hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version'
    });
  }
  const deprecatedMarginSpacerProps = !__nextHasNoMargin ? {
    marginTop: !gradients.length ? 3 : undefined,
    marginBottom: !clearable ? 6 : 0
  } : {};
  return (
    // Outmost Spacer wrapper can be removed when deprecation period is over
    createElement(Spacer, {
      marginBottom: 0,
      ...deprecatedMarginSpacerProps
    }, createElement(VStack, {
      spacing: gradients.length ? 4 : 0
    }, !disableCustomGradients && createElement(CustomGradientPicker, {
      __nextHasNoMargin: true,
      __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
      value: value,
      onChange: onChange
    }), (gradients.length > 0 || clearable) && createElement(Component, {
      ...additionalProps,
      className: className,
      clearGradient: clearGradient,
      gradients: gradients,
      onChange: onChange,
      value: value,
      actions: clearable && !disableCustomGradients && createElement(CircularOptionPicker.ButtonAction, {
        onClick: clearGradient
      }, __('Clear')),
      headingLevel: headingLevel
    })))
  );
}
export default GradientPicker;
//# sourceMappingURL=index.js.map