import React, { ElementRef, forwardRef } from "react"
import { classNames } from "../../utils/classNames"
import { Block, BlockProps } from "../Block"
import { FlexProps } from "../Flex"
import { FlexColumn } from "../FlexColumn"
import { ItemProps } from "../Item"
import { Text, TextBodyProps } from "../Text"

export type SideModuleProps = FlexProps

const SideModuleBase = forwardRef<ElementRef<"div">, SideModuleProps>(
  function SideModule({ children, className, ...rest }, ref) {
    return (
      <FlexColumn
        className={classNames(
          // Adjust max height as necessary with this component
          "max-h-screen max-h-dvh overflow-auto",
          "*:border-b *:border-border-1",
          "*:last:border-0",
          className,
        )}
        ref={ref}
        {...rest}
      >
        {children}
      </FlexColumn>
    )
  },
)

export type SideModuleItemProps = ItemProps

const SideModuleSectionBase = forwardRef<ElementRef<typeof Block>, BlockProps>(
  function SideModuleSection({ className, ...rest }, ref) {
    return (
      <Block
        className={classNames("py-6 first:pt-0 last:pb-0", className)}
        ref={ref}
        {...rest}
      />
    )
  },
)

const SideModuleSectionTitle = forwardRef<
  ElementRef<typeof Text>,
  TextBodyProps
>(function SideModuleSectionTitle({ className, ...rest }, ref) {
  return (
    <Text
      className={classNames("pb-3", className)}
      ref={ref}
      weight="semibold"
      {...rest}
    />
  )
})

export const SideModuleSection = Object.assign(SideModuleSectionBase, {
  Title: SideModuleSectionTitle,
})

export const SideModule = Object.assign(SideModuleBase, {
  Section: SideModuleSection,
})