import { forwardRef } from 'react';
import PropTypes from 'prop-types';
import useResponsiveValues from "../../../hooks/breakpoint/useResponsiveValues/index.js";
import CustomPropTypes from "../../../utils/prop-types/index.js";
import getColor from "../../../utils/colors/getColor.js";
import { merge } from "../../../utils/css/cx.js";
import getPaddingClasses from "../../../utils/css/getPaddingClasses.js";
import getMarginClasses from "../../../utils/css/getMarginClasses.js";
import getBorderClasses from "../../../utils/css/getBorderClasses.js";
import getEdgeClasses from "../../../utils/css/getEdgeClasses.js";
import getShadowClasses from "../../../utils/css/getShadowClasses.js";
import customizable from "../../../utils/css/customizable.js";
import classes from './styles.module.scss';
const customCx = merge(classes, {
  customizable: ['Card']
});

/**
 * Cards are surfaces that display content and actions about a single topic. In
 * many cases on the web and in apps, they are used as entry points into more
 * complex information. In INT projects, we most often use them to contain bits
 * of information and help readers move through a page more efficiently.
 *
 * ```js
 *
 * import { Card } from '@politico/interactive-style';
 * ```
 */
const Card = forwardRef((props, ref) => {
  const {
    shadow,
    border,
    edge,
    padding,
    margin,
    bg,
    fg,
    children
  } = props;
  const paddingValue = useResponsiveValues(padding);
  const pads = getPaddingClasses(paddingValue);
  const marginValue = useResponsiveValues(margin);
  const margins = getMarginClasses(marginValue);
  const [borderClasses, borderValues] = getBorderClasses(border, {
    classAttributes: ['style', 'width']
  });
  const edgeClasses = getEdgeClasses(edge);
  const shadowClasses = getShadowClasses(shadow);
  return <div ref={ref} className={customCx(customizable('Card'), 'container', edgeClasses, shadowClasses, pads, margins, borderClasses)} style={{
    '--Card-bg': getColor(bg),
    '--Card-fg': getColor(fg),
    '--Card-border-color': getColor(borderValues.color),
    borderWidth: borderValues.width
  }}>
      {children}
    </div>;
});
Card.displayName = 'Card';
Card.defaultProps = {
  shadow: '100',
  border: undefined,
  edge: 'round',
  padding: '4',
  margin: undefined,
  bg: undefined,
  fg: undefined,
  children: undefined
};
Card.propTypes = {
  /**
   * Sets the elevation level of the card. See the section on elevation for
   * guidance on which level to choose. Setting this prop to `"000"` will turn
   * the shadow off completely.
   */
  shadow: PropTypes.oneOf(['000', '100', '200', '300', '400']),
  /**
   * Sets the color and width of the card's border. You can activate the
   * default border by setting this to `true`, you can customize just the color
   * by passing either a color name or a CSS color value as a string, or you
   * can customize both the color and the width by passing an object with they
   * keys `color` and `width`. When customizing the width, set it as
   * a numerical pixel value.
   */
  border: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.shape({
    color: PropTypes.string,
    width: PropTypes.number,
    style: PropTypes.string
  })]),
  /**
   * Sets the corner style of the card to one of our standard edge levels.
   */
  edge: PropTypes.oneOf(['0', '1', '2', '4', '5', '6', '8', 'sharp', 'round', 'max']),
  /**
   * The padding around the content of the card. Padding can be specified as
   * one spacing value that gets used on all sides, separate `x` and `y`
   * values, or completely separate `trbl` values. The values correspond to
   * levels of our spacing scale (e.g., `"4"` corresponds to `$spacing-4`).
   *
   * Card padding can also be specified as a responsive value. See our guide on
   * our standard styling props for more details.
   */
  padding: CustomPropTypes.responsive(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
    x: PropTypes.string,
    y: PropTypes.string
  }), PropTypes.shape({
    t: PropTypes.string,
    r: PropTypes.string,
    b: PropTypes.string,
    l: PropTypes.string
  })])),
  /**
   * The margin around the card. Margins can be specified as one spacing value
   * that gets used on all sides, separate `x` and `y` values, or completely
   * separate `trbl` values. The values correspond to levels of our spacing
   * scale (e.g., `"4"` corresponds to `$spacing-4`).
   *
   * Card margins can also be specified as a responsive value. See our guide on
   * our standard styling props for more details.
   */
  margin: CustomPropTypes.responsive(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
    x: PropTypes.string,
    y: PropTypes.string
  }), PropTypes.shape({
    t: PropTypes.string,
    r: PropTypes.string,
    b: PropTypes.string,
    l: PropTypes.string
  })])),
  /**
   * Sets the background color of the card, which is `white` by default. This
   * prop accepts either a color name provided by this library or a CSS color
   * value.
   */
  bg: PropTypes.string,
  /**
   * Sets the foreground color of the card, which is set to `inherit` by
   * default. This prop accepts either a color name provided by this library or
   * a CSS color value.
   */
  fg: PropTypes.string,
  /**
   * The content that should be rendered in the body of the card.
   */
  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
};
export default Card;