/**
 * External dependencies
 */
import clsx from "clsx";
import styled from "@emotion/styled";

/**
 * WordPress dependencies
 */
import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from "@wordpress/block-editor";

/**
 * Internal dependencies
 */
const StyledPanel = styled(PanelColorGradientSettings)`
  padding: 0 !important;
  margin-top: 0 !important;
  border-top: 0 !important;

  > .first {
    margin-top: 0 !important;
  }

  &.is-inner-control {
    .block-editor-panel-color-gradient-settings__dropdown {
      height: 32px;
      padding: 5px;
    }

    .block-editor-panel-color-gradient-settings__reset {
      margin-top: -4px;
    }

    .block-editor-panel-color-gradient-settings__color-name {
      overflow: visible;
    }
  }

  &.is-hidden-reset {
    .block-editor-panel-color-gradient-settings__reset {
      display: none;
    }
  }
`;

export const ColorGradientDropdown = ({
  enableAlpha,
  settings,
  className,
  ...otherProps
}) => {
  return (
    <StyledPanel
      __experimentalIsRenderedInSidebar={true}
      enableAlpha={enableAlpha}
      className={clsx("panel-color-gradient", className)}
      settings={settings.map((setting) => ({ ...setting, clearable: true }))}
      {...otherProps}
    />
  );
};
