'use client'

import * as React from 'react'
import { Check, ChevronDown } from 'lucide-react'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from './dropdown-menu'
import { cn } from '@/lib/utils/cn'
import { Button } from './button'
import { useScopedI18n } from '@/locales/client'

interface MultiSelectProps {
  options: { label: string; value: string }[]
  value: string[]
  onChange: (value: string[]) => void
  placeholder?: string
  triggerLabel?: string
  className?: string
}

export const MultiSelect = ({
  options,
  value,
  onChange,
  placeholder = 'Select options',
  triggerLabel,
  className = '',
}: MultiSelectProps) => {
  const handleSelect = (optionValue: string) => {
    const newValue = value.includes(optionValue)
      ? value.filter((v) => v !== optionValue)
      : [...value, optionValue]

    onChange(newValue)
  }

  const handleSelectAll = () => {
    onChange(options.map((opt) => opt.value))
  }

  const handleClearAll = () => {
    onChange([])
  }

  const t = useScopedI18n('catalog.labels')

  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        className={`flex items-center gap-1 text-sm focus:outline-none bg-none cursor-pointer text-base-white hover:text-beige-300 button-small-medium px-4 py-3 w-fit ${className}`}
      >
        <span className="truncate">{triggerLabel || placeholder}</span>
        <ChevronDown className="h-4 w-4 opacity-50" />
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56 max-h-60 overflow-y-auto">
        <div className="flex items-center justify-between px-2 py-1">
          <Button
            variant="ancor-link"
            className="px-2 py-1 label-medium-medium h-6"
            onClick={handleSelectAll}
          >
            {t('all')}
          </Button>
          <Button
            variant="ancor-link"
            className="px-2  py-1 label-medium-medium h-6"
            onClick={handleClearAll}
          >
            {t('clearAll')}
          </Button>
        </div>
        {options.map((option, i) => {
          const isSelected = value.includes(option.value)

          return (
            <DropdownMenuItem
              key={option.value}
              className={cn(
                'cursor-pointer p-2 flex items-center',
                isSelected ? 'bg-accent text-accent-foreground' : '',
                i !== options.length - 1 ? 'border-b border-b-grey-600' : '',
              )}
              onSelect={(e) => {
                e.preventDefault()
                handleSelect(option.value)
              }}
            >
              <div className="flex items-center space-x-2 w-full">
                <div
                  className={`p-2 flex items-center justify-center h-4 w-4 rounded-sm border ${
                    isSelected ? 'bg-beige-500 border-beige-600' : 'border-border'
                  }`}
                >
                  {isSelected && <Check className="h-3 w-3 text-base-white" />}
                </div>
                <span>{option.label}</span>
              </div>
            </DropdownMenuItem>
          )
        })}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
