import { ScaleSequential } from "d3-scale"
import { NumberOfChildrenPlacement } from "../Node"
import { TooltipPlacement } from "../Tooltip/types"
import { BaseTreeMapInPutData } from "./types"
import { HierarchyRectangularNode } from "d3-hierarchy"

export interface TreeMapProps<TreeMapInputData extends BaseTreeMapInPutData> {
  /**
   * TreeMap id, will be use for create customId for each node
   */
  id: string

  /**
   * TreeMap width
   */
  width: number

  /**
   * TreeMap height
   */
  height: number

  /**
   * TreeMap data. Normally should have at least name, value and children.
   *
   * Example:
   * interface TreeMapInPutData {
   *   id: number
   *   name: string
   *   value?: number
   *   children?: Array<TreeMapInPutData>
   *   className?: string
   *   link?: string
   * }
   */
  data: TreeMapInputData

  /*
        Unit for values. For example MB
    */
  valueUnit?: string

  /*
   * Format for the values
   * https://github.com/d3/d3-format#format
   */
  valueFormat?: string

  /**
   * Hide breadcrumb.
   *
   * If you app doesn't use breadcrumb, you can pass down a ref
   * and use the methods: zoomOut, resetZoom
   */
  disableBreadcrumb?: boolean

  /**
   * There are few color strategies for nodes:
   *    Depth: different color per depth
   *    Value: different color depends on how big / small is the value
   *    NumberOfChildren: different color depends on how many children node has
   *    OneEachChildren: one color per each top children, then range of colors from white to that one
   */
  colorModel?: ColorModel

  /**
   * Don't show the value
   */
  hideValue?: boolean

  /**
   * Overrides top div main class
   */
  className?: string

  /**
   * Overrides svg class
   */
  svgClassName?: string

  /**
   * Overrides node class
   */
  nodeClassName?: string

  /**
   * Overrides breadcrumb class
   */
  breadCrumbClassName?: string

  /**
   * Overrides svg style
   */
  svgStyle?: React.CSSProperties

  /**
   * Overrides node style
   */
  nodeStyle?: React.CSSProperties

  /**
   * Padding out of the nodes ( calculated by D3 )
   */
  paddingOuter?: number

  /**
   * Padding between nodes ( calculated by D3 )
   */
  paddingInner?: number

  /**
   * Custom ScaleSequential from D3
   */
  customD3ColorScale?: ScaleSequential<string>

  /**
   * Name for the property `name` included in data
   *
   * @default "name"
   */
  namePropInData?: string

  /**
   * Name for the property `link` included in data
   *
   * @default "link"
   */
  linkPropInData?: string

  /**
   * Name for the property `value` included in data
   *
   * @default "value"
   */
  valuePropInData?: string

  /**
   * Name for the property `children` included in data
   *
   * @default "children"
   */
  childrenPropInData?: string

  /**
   * Captures on zoom event
   */
  onZoom?: (currentNode: HierarchyRectangularNode<TreeMapInputData>) => void

  /**
   * Indicates where to place NumberOfChildren box
   *
   * @default NumberOfChildrenPlacement.BottomRight
   */
  numberOfChildrenPlacement: NumberOfChildrenPlacement

  /**
   * Color for text and children counter when background is dark
   *
   * @default white
   */
  darkNodeTextColor?: string

  /**
   * Color for node border when background is dark
   *
   * @default white
   */
  darkNodeBorderColor?: string

  /**
   * Color for text and children counter when background is light
   *
   * @default black
   */
  lightNodeTextColor?: string

  /**
   * Color for node border when background is dark
   *
   * @default black
   */
  lightNodeBorderColor?: string

  /**
   * Override value text for node
   */
  valueFn?: (value: number) => string

  /**
   * Tooltip placement. If none is specified then is automatic depending on
   * the quadrant of the treeMap
   */
  tooltipPlacement?: TooltipPlacement

  /**
   * Tooltip custom css class
   */
  tooltipClassName?: string

  /**
   * Disable custom tooltip
   *
   * @default false
   */
  disableTooltip?: boolean

  /**
   * Tooltip offset X
   *
   * @default 0
   */
  tooltipOffsetX?: number

  /**
   * Tooltip offset Y
   *
   * @default 0
   */
  tooltipOffsetY?: number

  /**
   * Number of levels to display in TreeMap
   *
   * @default 1
   */
  levelsToDisplay?: number

  splitRegExp?: RegExp

  onNodeClick?: (node: HierarchyRectangularNode<TreeMapInputData>) => void
}

export enum ColorModel {
  Depth,
  Value,
  NumberOfChildren,
  OneEachChildren,
}