import * as React from 'react'
import * as SelectPrimitive from '@radix-ui/react-select'
import { Check } from 'lucide-react'
import tw from 'twin.macro'

const Select = SelectPrimitive.Root
const SelectGroup = SelectPrimitive.Group
const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    css={tw`
      flex
      h-10
      w-full
      items-center
      justify-between
      rounded-md
      border
      border-slate-300
      bg-transparent
      py-2
      px-3
      text-sm
      placeholder:text-slate-400
      focus:outline-none
      focus:ring-2
      focus:ring-slate-400
      focus:ring-offset-2
      disabled:cursor-not-allowed
      disabled:opacity-50
      dark:border-slate-700
      dark:text-slate-50 dark:focus:ring-slate-400
      dark:focus:ring-offset-slate-900
    `}
    {...props}
  >
    {children}
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ children, ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      css={tw`
        relative
        z-50
        min-w-[8rem]
        overflow-hidden
        rounded-md
        border
        border-slate-100
        bg-white
        text-slate-700
        shadow-md
        animate-in
        fade-in-80
        dark:border-slate-800
        dark:bg-slate-800
        dark:text-slate-400
      `}
      {...props}
    >
      <SelectPrimitive.Viewport tw="p-1">{children}</SelectPrimitive.Viewport>
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ ...props }, ref) => (
  <SelectPrimitive.Label
    ref={ref}
    tw="py-1.5 pr-2 pl-8 text-sm font-semibold text-slate-900 dark:text-slate-300"
    {...props}
  />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    css={tw`
      relative
      flex
      cursor-default
      select-none
      items-center
      rounded-sm
      py-1.5
      pr-2
      pl-8
      text-sm
      font-medium
      outline-none
      focus:bg-slate-100
      data-[disabled]:pointer-events-none
      data-[disabled]:opacity-50
      dark:focus:bg-slate-700
    `}
    {...props}
  >
    <span tw="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
        <Check tw="h-4 w-4" />
      </SelectPrimitive.ItemIndicator>
    </span>

    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ ...props }, ref) => (
  <SelectPrimitive.Separator
    ref={ref}
    tw="mx-1 my-1 h-px bg-slate-100 dark:bg-slate-700"
    {...props}
  />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

const _Select = Select
export {
  _Select as Root,
  SelectGroup as Group,
  SelectValue as Value,
  SelectTrigger as Trigger,
  SelectContent as Content,
  SelectLabel as Label,
  SelectItem as Item,
  SelectSeparator as Separator,
}
