import { forwardRef } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import normalizeStatefulColorSet from "../../../utils/colors/normalizeStatefulColorSet.js";
import getColor from "../../../utils/colors/getColor.js";
import customizable from "../../../utils/css/customizable.js";
import classes from './styles.module.scss';

/**
 * Segmented controls are a linear set of controls that function as buttons.
 * Use them in your design to provide choices that are closely related and
 * affect an object, state, or view. In general you'll want [to render `Button`
 * components][button] as the immediate children of `SegmentedControlGroup`.
 * Note that while each button _could_ specify its own colors and everything,
 * you'll usually want to specify the coloration and edge behavior at the
 * control group level.
 *
 * ```js
 *
 * import { SegmentedControlGroup } from '@politico/interactive-style';
 * ```
 *
 * [button]: ./?path=/docs/components-action-button--basic
 */
const SegmentedControlGroup = forwardRef((props, ref) => {
  const {
    edge,
    mode,
    bg,
    fg,
    border,
    children
  } = props;
  const states = ['default', 'active', 'hover', 'disabled'];
  const bgs = normalizeStatefulColorSet(bg, states);
  const fgs = normalizeStatefulColorSet(fg, states);
  const borders = normalizeStatefulColorSet(border, states);
  return <div ref={ref} className={classnames(customizable('SegmentedControlGroup'), classes.container, classes[edge], classes[mode])} style={{
    '--SegmentedControlGroup-bg': getColor(bgs.default),
    '--SegmentedControlGroup-fg': getColor(fgs.default),
    '--SegmentedControlGroup-border': getColor(borders.default),
    '--SegmentedControlGroup-active-bg': getColor(bgs.active),
    '--SegmentedControlGroup-active-fg': getColor(fgs.active),
    '--SegmentedControlGroup-active-border': getColor(borders.active),
    '--SegmentedControlGroup-hover-bg': getColor(bgs.hover),
    '--SegmentedControlGroup-hover-fg': getColor(fgs.hover),
    '--SegmentedControlGroup-hover-border': getColor(borders.hover),
    '--SegmentedControlGroup-disabled-bg': getColor(bgs.disabled),
    '--SegmentedControlGroup-disabled-fg': getColor(fgs.disabled),
    '--SegmentedControlGroup-disabled-border': getColor(borders.disabled)
  }}>
      {children}
    </div>;
});
SegmentedControlGroup.displayName = 'SegmentedControlGroup';
SegmentedControlGroup.defaultProps = {
  edge: 'round',
  mode: 'primary',
  fg: undefined,
  bg: undefined,
  border: undefined,
  children: undefined
};
SegmentedControlGroup.propTypes = {
  /**
   * Set the corner style of the control group one of our standard edge levels.
   * In rounded control groups only the first and last buttons will actually be
   * rounded. In general, either sharp or round control groups should be used
   * consistently within a single project.
   */
  edge: PropTypes.oneOf(['0', '1', '2', '3', '4', '5', '6', '8', 'round', 'sharp', 'max']),
  /**
   * Set the visual hierarchy mode of the control group. Primary control groups
   * generally afford greater visual emphasis and secondary control groups are
   * more subtle.
   */
  mode: PropTypes.oneOf(['primary', 'secondary']),
  /**
   * A stateful color set to use for the foreground of the buttons in this
   * control group. The supported states are `default`, `hover`, `active`, and
   * `disabled`; if a string is provided it is considered shorthand for the
   * `default` state color. Each color value can be either the name of a color
   * provided by this library (e.g., `altblack-80`) or a valid CSS color (e.g.,
   * `red`, `#f04444`).
   */
  fg: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
    default: PropTypes.string,
    hover: PropTypes.string,
    active: PropTypes.string,
    disabled: PropTypes.string
  })]),
  /**
   * A stateful color set to use for the background of the buttons in this
   * control group. The supported states are `default`, `hover`, `active`, and
   * `disabled`; if a string is provided it is considered shorthand for the
   * `default` state color. Each color value can be either the name of a color
   * provided by this library (e.g., `altblack-80`) or a valid CSS color (e.g.,
   * `red`, `#f04444`).
   */
  bg: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
    default: PropTypes.string,
    hover: PropTypes.string,
    active: PropTypes.string,
    disabled: PropTypes.string
  })]),
  /**
   * A stateful color set to use for the border color of the buttons in this
   * control group. The supported states are `default`, `hover`, `active`, and
   * `disabled`; if a string is provided it is considered shorthand for the
   * `default` state color. Each color value can be either the name of a color
   * provided by this library (e.g., `altblack-80`) or a valid CSS color (e.g.,
   * `red`, `#f04444`).
   */
  border: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
    default: PropTypes.string,
    hover: PropTypes.string,
    active: PropTypes.string,
    disabled: PropTypes.string
  })]),
  /**
   * The children to render in this control group. Generally these will be
   * `Button` components from this library with each `Button` specifying
   * whether it's active or disabled and what to do when it's clicked.
   */
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
};
export default SegmentedControlGroup;