// Pane
//
// Internally used by SplitPane to create the resizable panes
//
// Vertical splitpane panes gets the classes "pane vertical"
// Horizontal splitpane panes gets the classes "pane horizontal"
//
// The first pane gets an added class "first"

import React, { CSSProperties, forwardRef, ReactNode } from "react"

interface PaneProps {
  split?: "vertical" | "horizontal"
  width?: number | string
  children?: ReactNode
}

const Pane = forwardRef<HTMLDivElement, PaneProps>(function Pane(props, ref) {
  const split = props.split ?? "vertical"

  const classNames = ["pane"]
  const style: CSSProperties = {
    flex: "0 0 auto",
    position: "relative"
  }

  if (split === "vertical") {
    classNames.push("vertical")
    if (props.width != null) {
      style.width = props.width
    }
  } else {
    classNames.push("horizontal")
    if (props.width != null) {
      style.height = props.width
    }
  }

  if (props.width) {
    classNames.push("first")
  } else {
    style.flex = 1
    if (split === "vertical") {
      style.width = "100%"
    } else {
      style.height = "100%"
    }
  }

  return (
    <div ref={ref} style={style} className={classNames.join(" ")}>
      {props.children}
    </div>
  )
})

export default Pane