import React from "react"

import { css } from "@emotion/react"
import styled from "@emotion/styled/macro"
import { Listbox } from "@headlessui/react"

const StyledOption = styled.span`
  ${({ theme: { color, space } }) => css`
    > li {
      font-size: ${space.medium};
      list-style: none;
      cursor: pointer;
      padding: calc(${space.smallest} * 2);
      overflow-x: hidden;
      text-overflow: ellipsis;

      &.selected {
        color: ${color.primary.fg};
      }
      &.active {
        background-color: ${color.bg.highlight};
      }
    }
  `}
`

type GetClassesArgs = {
  active: boolean
  selected: boolean
}
const getOptionClasses = ({ active, selected }: GetClassesArgs) => {
  const classes: string[] = []
  if (active) classes.push("active")
  if (selected) classes.push("selected")
  return classes.join(" ")
}

export type Option = {
  value: string
  label?: string
}

export const SelectOption = ({ value, label }: Option) => (
  <StyledOption>
    <Listbox.Option value={value} className={getOptionClasses}>
      {label}
    </Listbox.Option>
  </StyledOption>
)