// The following element listings are taken from the facebook/react repository.
// https://github.com/facebook/react/blob/main/packages/react-dom/src/shared/DOMProperty.js

// A few React string attributes have a different name.
// This is a mapping from React prop names to the attribute names.
export const renamedAttributes = new Map([
  ["accept-charset", "acceptCharset"],
  ["class", "className"],
  ["for", "htmlFor"],
  ["http-equiv", "httpEquiv"],
]);

// These are "enumerated" HTML attributes that accept "true" and "false".
// In React, we let users pass `true` and `false` even though technically
// these aren't boolean attributes (they are coerced to strings).
export const coerceToBooleanAttributes = [
  "allowFullScreen",
  "async",
  "autoFocus",
  "autoPlay",
  "checked",
  "contentEditable",
  "controls",
  "default",
  "defer",
  "disabled",
  "disablePictureInPicture",
  "disableRemotePlayback",
  "draggable",
  "formNoValidate",
  "hidden",
  "itemScope",
  "loop",
  "multiple",
  "muted",
  "noModule",
  "noValidate",
  "open",
  "playsInline",
  "readOnly",
  "required",
  "reversed",
  "scoped",
  "seamless",
  "selected",
  "spellCheck",
  "value",

  // These accept other values than true and false which are just left as is.
  // true and false will get converted to booleans.
  "capture",
  "download",
];

// These are "enumerated" SVG attributes that accept "true" and "false".
// In React, we let users pass `true` and `false` even though technically
// these aren't boolean attributes (they are coerced to strings).
// Since these are SVG attributes, their attribute names are case-sensitive.
export const svgCoerceToBooleanAttributes = [
  "autoReverse",
  "externalResourcesRequired",
  "focusable",
  "preserveAlpha",
];

// These are HTML attributes that must be positive numbers.
export const numberAttributes = [
  "border",
  "cellPadding",
  "cellSpacing",
  "cols",
  "marginHeight",
  "marginWidth",
  "maxLength",
  "minLength",
  "rows",
  "rowSpan",
  "size",
  "span",
  "start",
  "tabIndex",
];

// These properties are SVG and have to be camelized.
// The second value in the array determines should be converted to a number if
// possible.
export const svgCamelizedAttributes = [
  ["accent-height", false],
  ["alignment-baseline", false],
  ["arabic-form", false],
  ["baseline-shift", false],
  ["cap-height", true],
  ["clip-path", false],
  ["clip-rule", false],
  ["color-interpolation-filters", false],
  ["color-interpolation", false],
  ["color-profile", false],
  ["color-rendering", false],
  ["dominant-baseline", false],
  ["enable-background", false],
  ["fill-opacity", false],
  ["fill-rule", false],
  ["flood-color", false],
  ["flood-opacity", false],
  ["font-family", false],
  ["font-size-adjust", true],
  ["font-size", true],
  ["font-stretch", false],
  ["font-style", false],
  ["font-variant", false],
  ["font-weight", true],
  ["glyph-name", false],
  ["glyph-orientation-horizontal", false],
  ["glyph-orientation-vertical", false],
  ["horiz-adv-x", true],
  ["horiz-origin-x", true],
  ["image-rendering", false],
  ["letter-spacing", true],
  ["lighting-color", false],
  ["marker-end", false],
  ["marker-mid", false],
  ["marker-start", false],
  ["overline-position", true],
  ["overline-thickness", true],
  ["paint-order", false],
  ["panose-1", false],
  ["pointer-events", false],
  ["rendering-intent", false],
  ["shape-rendering", false],
  ["stop-color", false],
  ["stop-opacity", false],
  ["strikethrough-position", true],
  ["strikethrough-thickness", true],
  ["stroke-dasharray", false],
  ["stroke-dashoffset", true],
  ["stroke-linecap", false],
  ["stroke-linejoin", false],
  ["stroke-miterlimit", true],
  ["stroke-opacity", false],
  ["stroke-width", true],
  ["text-anchor", false],
  ["text-decoration", false],
  ["text-rendering", false],
  ["underline-position", true],
  ["underline-thickness", true],
  ["unicode-bidi", false],
  ["unicode-range", false],
  ["units-per-em", true],
  ["v-alphabetic", true],
  ["v-hanging", true],
  ["v-ideographic", true],
  ["v-mathematical", true],
  ["vector-effect", false],
  ["vert-adv-y", true],
  ["vert-origin-x", true],
  ["vert-origin-y", true],
  ["word-spacing", true],
  ["writing-mode", false],
  ["x-height", true],
  ["xmlns:xlink", false],
];

// Supported event attributes in React, taken from
// https://reactjs.org/docs/events.html
export const eventHandlerAttributes = [
  "onAbort",
  "onAnimationEnd",
  "onAnimationIteration",
  "onAnimationStart",
  "onBlur",
  "onCanPlay",
  "onCanPlayThrough",
  "onChange",
  "onClick",
  "onCompositionEnd",
  "onCompositionStart",
  "onCompositionUpdate",
  "onContextMenu",
  "onCopy",
  "onCut",
  "onDoubleClick",
  "onDrag",
  "onDragEnd",
  "onDragEnter",
  "onDragExit",
  "onDragLeave",
  "onDragOver",
  "onDragStart",
  "onDrop",
  "onDurationChange",
  "onEmptied",
  "onEncrypted",
  "onEnded",
  "onError",
  "onError",
  "onFocus",
  "onGotPointerCapture",
  "onInput",
  "onInvalid",
  "onKeyDown",
  "onKeyPress",
  "onKeyUp",
  "onLoad",
  "onLoadedData",
  "onLoadedMetadata",
  "onLoadStart",
  "onLostPointerCapture",
  "onMouseDown",
  "onMouseEnter",
  "onMouseLeave",
  "onMouseMove",
  "onMouseOut",
  "onMouseOver",
  "onMouseUp",
  "onPaste",
  "onPause",
  "onPlay",
  "onPlaying",
  "onPointerCancel",
  "onPointerDown",
  "onPointerEnter",
  "onPointerLeave",
  "onPointerMove",
  "onPointerOut",
  "onPointerOver",
  "onPointerUp",
  "onProgress",
  "onRateChange",
  "onReset",
  "onScroll",
  "onSeeked",
  "onSeeking",
  "onSelect",
  "onStalled",
  "onSubmit",
  "onSuspend",
  "onTimeUpdate",
  "onToggle",
  "onTouchCancel",
  "onTouchEnd",
  "onTouchMove",
  "onTouchStart",
  "onTransitionEnd",
  "onVolumeChange",
  "onWaiting",
  "onWheel",
];

// List of attributes that are lower-cased in HTML but have to be camel-cased in
// JSX code. Taken from https://reactjs.org/docs/dom-elements.html
export const lowercasedAttributes = [
  "accessKey",
  "autoComplete",
  "charSet",
  "classID",
  "colSpan",
  "cellSpacing",
  "cellMargin",
  "contextMenu",
  "controlsList",
  "crossOrigin",
  "dateTime",
  "encType",
  "formAction",
  "formEncType",
  "formMethod",
  "formTarget",
  "frameBorder",
  "hrefLang",
  "inputMode",
  "keyParams",
  "keyType",
  "mediaGroup",
  "radioGroup",
  "srcDoc",
  "srcLang",
  "srcSet",
  "useMap",
];

/**
 * Don't strip the px suffix from these style attributes
 * because they can contain both length (e.g. `13px`) and
 * unitless values (e.g. `3`), which have different
 * meanings.
 *
 * (Background: React automatically adds a `px` to unitless
 * numbers specified in style attributes, so these attributes
 * should not be included in `px` stripping).
 */
export const styleDontStripPx = [
  "line-height",
  "flex",
  "mask-border-outset",
  "mask-box-outset",
  "mask-border-width",
];