import * as React from 'react';
import { PositionReference } from '../Enums/PositionReference';
import { IMargin } from './IMargin';
import { Orientation } from '../Enums/Orientation';

/**
 * Properties of a container
 */
export interface IContainerProperties {
  /** id of the container */
  id: string

  /** type matching the configuration on construction */
  type: string

  /** id of the parent container (null when there is no parent) */
  parentId: string

  /** id of the linked symbol ('' when there is no parent) */
  linkedSymbolId: string

  /** Text displayed in the container */
  displayedText: string

  /** orientation */
  orientation: Orientation

  /** horizontal offset */
  x: number

  /** vertical offset */
  y: number

  /** margin */
  margin: IMargin

  /** width */
  width: number

  /** height */
  height: number

  /**
   * Minimum width (min=1)
   */
  minWidth: number

  /**
   * Maximum width
   */
  maxWidth: number

  /**
   * Minimum height (min=1)
   */
  minHeight: number

  /**
   * Maximum height
   */
  maxHeight: number

  /** true if anchor, false otherwise */
  isAnchor: boolean

  /** true if flex, false otherwise */
  isFlex: boolean

  /** Horizontal alignment, also determines the visual location of x {Left = 0, Center, Right } */
  positionReference: PositionReference

  /** Hide the children in the treeview */
  hideChildrenInTreeview: boolean

  /** if true, show the dimension of the container */
  showSelfDimensions: boolean

  /** if true show the overall dimensions of its children */
  showChildrenDimensions: boolean

  /**
   * if true, allows a parent dimension borrower to borrow its x coordinate
   * as a reference point for a dimension
   */
  markPositionToDimensionBorrower: Orientation[]

  /**
   * if true, show a dimension from the edge of the container to end
   * and insert dimensions marks at lift up children (see liftDimensionToBorrower)
   */
  isDimensionBorrower: boolean

  /**
   * Warnings of a container
   */
  warning: string

  /**
   * (optional)
   * Replace a <rect> by a customized "SVG". It is not really an svg but it at least allows
   * to draw some patterns that can be bind to the properties of the container
   * Use {prop} to bind a property. Use {{ styleProp }} to use an object.
   * Example :
   * ```
   * `<rect width="{width}" height="{height}" style="{style}"></rect>
   * <rect  width="{width}" height="{height}" stroke="black" fill-opacity="0"></rect>
   * <line x1="0" y1="0" x2="{width}" y2="{height}" stroke="black" style='{{ "transform":"scaleY(0.5)"}}'></line>
   * <line x1="{width}" y1="0" x2="0" y2="{height}" stroke="black" style='{userData.styleLine}'></line>
   * `
   * ```
   */
  customSVG?: string

  /**
   * (optional)
   * Style of the <rect>
   */
  style?: React.CSSProperties

  /**
   * (optional)
   * User data that can be used for data storage or custom SVG
   */
  userData?: object
}