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

import Label from "@/components/TempDesignSystem/Form/Label"
import Body from "@/components/TempDesignSystem/Text/Body"

import SelectChevron from "../Form/SelectChevron"

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

import type {
  SelectPortalContainer,
  SelectPortalContainerArgs,
  SelectProps,
} from "./select"

export default function Select({
  "aria-label": ariaLabel,
  defaultSelectedKey,
  items,
  label,
  name,
  onSelect,
  placeholder,
  value,
}: SelectProps) {
  const [rootDiv, setRootDiv] = useState<SelectPortalContainer>(undefined)

  function setRef(node: SelectPortalContainerArgs) {
    if (node) {
      setRootDiv(node)
    }
  }

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

  return (
    <div className={styles.container} ref={setRef}>
      <ReactAriaSelect
        aria-label={ariaLabel}
        className={styles.select}
        defaultSelectedKey={defaultSelectedKey}
        name={name}
        onSelectionChange={handleOnSelect}
        placeholder={placeholder}
        selectedKey={value as Key}
      >
        <Body asChild fontOnly>
          <Button className={styles.input}>
            <div className={styles.inputContentWrapper}>
              <Label size="small">{label}</Label>
              <SelectValue />
            </div>
            <SelectChevron />
          </Button>
        </Body>
        <Body asChild fontOnly>
          <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}
          >
            <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>
        </Body>
      </ReactAriaSelect>
    </div>
  )
}
