import { ComponentPropsWithoutRef } from 'react'
import {
  Button,
  Label,
  ListBox,
  ListBoxItem,
  Popover,
  Select,
  SelectValue,
} from 'react-aria-components'

import { themes } from '../../.storybook/preview'

type ThemeSwitcherProps = Pick<
  ComponentPropsWithoutRef<typeof Select>,
  'defaultSelectedKey' | 'onSelectionChange'
>

export function ThemeSwitcher(props: ThemeSwitcherProps) {
  return (
    <Select {...props}>
      <Label>Theme: </Label>
      <Button>
        <SelectValue />
        <span aria-hidden="true">▼</span>
      </Button>
      <Popover style={{ border: 'solid 1px #000', background: '#fff' }}>
        <ListBox>
          {Array.from(Object.entries(themes.themes)).map(([label, key]) => {
            return (
              <ListBoxItem key={key} id={key} style={{ padding: '0.5em' }}>
                {label}
              </ListBoxItem>
            )
          })}
        </ListBox>
      </Popover>
    </Select>
  )
}