"use client"
import { RefObject, useEffect, useRef, useState } from "react"
import {
  Button,
  type Key,
  Label,
  ListBox,
  ListBoxItem,
  Popover,
  Select as ReactAriaSelect,
  SelectValue,
} from "react-aria-components"

import SelectChevron from "../SelectChevron"

import styles from "./select.module.css"

import type { SelectProps } from "./select"

export default function Select({
  "aria-label": ariaLabel,
  items,
  label,
  onSelect,
  placeholder,
  value,
  defaultSelectedKey,
}: SelectProps) {
  const ref = useRef<HTMLDivElement>(null)
  const [rootDiv, setRootDiv] = useState<HTMLDivElement | null>(null)
  useEffect(() => {
    setRootDiv(ref.current)
  }, [setRootDiv])

  function handleOnSelect(key: Key) {
    onSelect(key)
  }

  return (
    <div className={styles.container} ref={ref}>
      <ReactAriaSelect
        defaultSelectedKey={defaultSelectedKey}
        aria-label={ariaLabel}
        className={styles.select}
        onSelectionChange={handleOnSelect}
        placeholder={placeholder}
        selectedKey={value as Key}
      >
        <Button className={styles.input}>
          <div className={styles.inputContentWrapper}>
            <Label className={styles.label}>{label}</Label>
            <SelectValue />
          </div>
          <SelectChevron />
        </Button>
        <Popover
          className={styles.popover}
          placement="bottom"
          shouldFlip={false}
          /**
           * react-aria uses portals to render Popover in body
           * unless otherwise specified. We need it to be contained
           * by this component to both access css variables assigned
           * on the container as well as to not overflow it at any time.
           */
          UNSTABLE_portalContainer={rootDiv ?? undefined}
        >
          <ListBox className={styles.listBox}>
            {items.map((item) => (
              <ListBoxItem
                aria-label={String(item)}
                className={styles.listBoxItem}
                id={item.value}
                key={item.label}
              >
                {item.label}
              </ListBoxItem>
            ))}
          </ListBox>
        </Popover>
      </ReactAriaSelect>
    </div>
  )
}