import React from "react"

export interface CrossComponentProps {
  /** north border style (e.g. "solid 1px blue") */
  n?: string
  /** east border style (e.g. "solid 1px blue") */
  e?: string
  /** south border style (e.g. "solid 1px blue") */
  s?: string
  /** west border style (e.g. "solid 1px blue") */
  w?: string
  /** 100% or 20, etc. Default: 100% */
  width?: any
  /** 100% or 20, etc. Default: 100% */
  height?: any
  /** True to collapse top half of box */
  collapseTop?: boolean
}

// Displays a box with a cross in it with any segments optionally drawn
export default class CrossComponent extends React.Component<CrossComponentProps> {
  static defaultProps = {
    width: "100%",
    height: "100%"
  }

  render() {
    // Make horizontal two boxes
    return (
      <div style={{ display: "flex", flexDirection: "column", width: this.props.width, height: this.props.height }}>
        <div style={{ display: "flex", flex: this.props.collapseTop ? "0 1 0px" : "1 1 0px" }}>
          <div style={{ display: "flex", flex: "1 1 0px", borderRight: this.props.n, borderBottom: this.props.w }} />
          <div style={{ display: "flex", flex: "1 1 0px", borderBottom: this.props.e }} />
        </div>
        <div style={{ display: "flex", flex: "1 1 0px" }}>
          <div style={{ display: "flex", flex: "1 1 0px", borderRight: this.props.s }} />
          <div style={{ display: "flex", flex: "1 1 0px" }} />
        </div>
      </div>
    )
  }
}