"use client"

import * as React from "react"
import { type Table } from "@tanstack/react-table"
import { Check, ChevronsUpDown, MoveRight } from "lucide-react"

import { cn, toSentenceCase } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

/**
 * “Pin Right” Popover. Similar to PinLeftButton, but pins columns to "right".
 */
export function PinRightButton<TData>({ table }: { table: Table<TData> }) {
  const [open, setOpen] = React.useState(false)
  const triggerRef = React.useRef<HTMLButtonElement>(null)

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          ref={triggerRef}
          variant="outline"
          size="sm"
          className="h-8 gap-2"
        >
          <MoveRight className="size-4" />

          <span className="hidden sm:inline">
            Right
          </span>
          <ChevronsUpDown className="ml-1 size-4 opacity-50 hidden sm:inline" />
        </Button>
      </PopoverTrigger>

      <PopoverContent
        align="end"
        className="w-44 p-0"
        onCloseAutoFocus={() => triggerRef.current?.focus()}
      >
        <Command>
          <CommandInput placeholder="Search columns..." />
          <CommandList>
            <CommandEmpty>No columns found.</CommandEmpty>
            <CommandGroup>
              {table
                .getAllLeafColumns()
                .filter((col) => col.getCanPin?.())
                .map((column) => {
                  const pinned = column.getIsPinned?.()
                  return (
                    <CommandItem
                      key={column.id}
                      onSelect={() => {
                        column.pin?.(pinned === "right" ? false : "right")
                      }}
                    >
                      <span className="truncate">
                        {toSentenceCase(column.id)}
                      </span>
                      <Check
                        className={cn(
                          "ml-auto size-4 shrink-0",
                          pinned === "right" ? "opacity-100" : "opacity-0"
                        )}
                      />
                    </CommandItem>
                  )
                })}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}