import React from "react"

const flexDirectionDict = {
  bottom: "column-reverse",
  top: "column",
  left: "row",
  right: "row-reverse",
} as const

export function LockedSplitLayout({
  lockedSide,
  lockedSize = "auto",
  children,
}: {
  lockedSide: keyof typeof flexDirectionDict
  lockedSize?: string
  children: [JSX.Element, JSX.Element]
}) {
  const mainView = children[0]
  const secondaryView = children[1]

  const containerStyle: React.CSSProperties = {
    height: "100%",
    display: "flex",
    flexDirection: flexDirectionDict[lockedSide],
  }
  const secondaryStyle: React.CSSProperties =
    lockedSide === "top" || lockedSide === "bottom"
      ? {
          height: lockedSize,
          flexShrink: 0,
        }
      : {
          width: lockedSize,
          overflow: "hidden",
          flexShrink: 0,
        }
  return (
    <div style={containerStyle}>
      <div style={secondaryStyle}>{secondaryView}</div>
      <div style={{ flexGrow: 1, flexShrink: 1, overflow: "hidden" }}>{mainView}</div>
    </div>
  )
}