// @flow
/*
  DOCUMENTATION: https://orbit.kiwi/components/Box/
*/
import * as React from "react";

import type { Globals } from "../common/common.js.flow";

// TODO: extend to suppressed and flat
export type Elevation =
  | "action"
  | "fixed"
  | "raised"
  | "overlay"
  | "fixedReverse"
  | "raisedReverse";

export type ColorTokens =
  | "productLight"
  | "productLightHover"
  | "productLightActive"
  | "productNormal"
  | "productNormalHover"
  | "productNormalActive"
  | "productDark"
  | "productDarkHover"
  | "productDarkActive"
  | "productDarker"
  | "white"
  | "whiteHover"
  | "whiteActive"
  | "cloudLight"
  | "cloudLightHover"
  | "cloudLightActive"
  | "cloudNormal"
  | "cloudNormalHover"
  | "cloudNormalActive"
  | "cloudDark"
  | "inkLighter"
  | "inkLighterHover"
  | "inkLighterActive"
  | "inkLight"
  | "inkLightHover"
  | "inkLightActive"
  | "inkNormal"
  | "inkNormalHover"
  | "inkNormalActive"
  | "orangeLight"
  | "orangeLightHover"
  | "orangeLightActive"
  | "orangeNormal"
  | "orangeNormalHover"
  | "orangeNormalActive"
  | "orangeDark"
  | "orangeDarkHover"
  | "orangeDarkActive"
  | "orangeDarker"
  | "redLight"
  | "redLightHover"
  | "redLightActive"
  | "redNormal"
  | "redNormalHover"
  | "redNormalActive"
  | "redDark"
  | "redDarkHover"
  | "redDarkActive"
  | "redDarker"
  | "greenLight"
  | "greenLightHover"
  | "greenLightActive"
  | "greenNormal"
  | "greenNormalHover"
  | "greenNormalActive"
  | "greenDark"
  | "greenDarkHover"
  | "greenDarkActive"
  | "greenDarker"
  | "blueLight"
  | "blueLightHover"
  | "blueLightActive"
  | "blueNormal"
  | "blueNormalHover"
  | "blueNormalActive"
  | "blueDark"
  | "blueDarkHover"
  | "blueDarkActive"
  | "blueDarker"
  | "socialFacebook"
  | "socialFacebookHover"
  | "socialFacebookActive";

export type SpacingToken =
  | "none"
  | "XXXSmall"
  | "XXSmall"
  | "XSmall"
  | "small"
  | "medium"
  | "large"
  | "XLarge"
  | "XXLarge"
  | "XXXLarge";

export type SpacingObject = {|
  +left?: SpacingToken,
  +top?: SpacingToken,
  +right?: SpacingToken,
  +bottom?: SpacingToken,
|};

export type MediaQueryObject = $Diff<
  // eslint-disable-next-line no-use-before-define
  Props,
  {| as: *, children: *, mediumMobile: *, largeMobile: *, tablet: *, desktop: *, largeDesktop: * |},
>;

export type Props = {|
  +as?: string,
  +padding?: SpacingObject | SpacingToken,
  +margin?: SpacingObject | SpacingToken,
  +display?: "none" | "flex" | "inline-flex" | "block" | "inline" | "inline-block" | "list-item",
  +wrap?: "wrap" | "nowrap",
  +shrink?: number,
  +grow?: number,
  +direction?: "row" | "column" | "row-reverse" | "column-reverse",
  +width?: string,
  +minWidth?: string,
  +maxWidth?: string,
  +height?: string,
  +maxHeight?: string,
  +position?: "absolute" | "relative" | "fixed",
  +left?: string,
  +zIndex?: number,
  +top?: string,
  +right?: string,
  +bottom?: string,
  +align?: "start" | "end" | "center" | "stretch",
  +justify?: "center" | "start" | "end" | "between" | "around",
  +textAlign?: "left" | "right" | "center",
  +elevation?: Elevation,
  +color?: ColorTokens,
  +background?: ColorTokens,
  +borderRadius?: "small" | "normal" | "large" | "circle",
  +overflow?: "auto" | "hidden" | "scroll" | "visible",
  +mediumMobile?: MediaQueryObject,
  +largeMobile?: MediaQueryObject,
  +tablet?: MediaQueryObject,
  +desktop?: MediaQueryObject,
  +largeDesktop?: MediaQueryObject,
  +children?: React.Node,
  +className?: string, // Box is a only component where extending make sense
  ...Globals,
|};

declare export default React.AbstractComponent<Props, HTMLDivElement>;