/* eslint-disable @typescript-eslint/naming-convention */
import React from 'react';
import { AddMethod } from '../Enums/AddMethod';
import { PositionReference } from '../Enums/PositionReference';
import { IAction } from './IAction';
import { IMargin } from './IMargin';
import { Orientation } from '../Enums/Orientation';
import { Position } from '../Enums/Position';

/** Model of available container used in application configuration */
export interface IAvailableContainer {
  /** type */
  Type: string

  /** displayed text */
  DisplayedText?: string

  /** category */
  Category?: string

  /** orientation */
  Orientation?: Orientation

  /** horizontal offset */
  X?: number

  /** vertical offset */
  Y?: number

  /** 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

  /** margin */
  Margin?: IMargin

  /** true if anchor, false otherwise */
  IsAnchor?: boolean

  /** true if flex, false otherwise */
  IsFlex?: boolean

  /** Method used on container add */
  AddMethod?: AddMethod

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

  /**
   * (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)
   * Disabled when Pattern is used.
   *
   * 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>
   * `
   * ```
   */
  DefaultChildType?: string

  /**
   * Allow to use a Pattern to create the list of children
   * Cannot be used with DefaultChildType,
   * DefaultChildType will be disabled for this container and the children
   */
  Pattern?: string

  /** Hide the children in the treeview */
  HideChildrenInTreeview?: boolean

  /** if true, show the dimension of the container */
  ShowSelfDimensions?: Position[]

  /** if true show the overall dimensions of its children */
  ShowChildrenDimensions?: Position[]

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

  /**
   * if true, show a dimension from the edge of the container to end
   * and insert dimensions marks at lift up children (see MarkPosition)
   */
  ShowDimensionWithMarks?: Position[]

  /**
   * if true, hide the entry in the sidebar (default: false)
   */
  IsHidden?: boolean

  /**
   * Disable a list of available container to be added inside
   */
  Blacklist?: string[]

  /**
   * Cannot be used with blacklist. Whitelist will be prioritized.
   * To disable the whitelist, Whitelist must be undefined.
   * Only allow a set of available container to be added inside
   */
  Whitelist?: string[]

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

  /**
   * List of possible actions shown on right-click
   */
  Actions?: IAction[]

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