/**
 * FontSelect Component
 *
 * A select component for font families with grouped options:
 * - Default (inherits from theme)
 * - Standard (system fonts)
 * - Google Fonts (loaded dynamically)
 * - Custom (added via WordPress filter)
 */

import * as RadixSelect from "@radix-ui/react-select";
import { ChevronDownIcon, CheckIcon } from "@radix-ui/react-icons";

import { getGroupedFontOptions, DEFAULT_FONT_VALUE, DEFAULT_FONT_LABEL } from "@/types";
import { useGoogleFontLoader } from "@/hooks/useGoogleFonts";

interface FontSelectProps {
  value: string;
  onValueChange: (value: string) => void;
  placeholder?: string;
  disabled?: boolean;
  className?: string;
  /** Use compact size for floating panels */
  size?: "default" | "compact";
}

export function FontSelect({
  value,
  onValueChange,
  placeholder = "Select font...",
  disabled = false,
  className = "",
  size = "default",
}: FontSelectProps) {
  const loadGoogleFont = useGoogleFontLoader();
  const groups = getGroupedFontOptions();

  const triggerClass = size === "compact" ? "floating-popover__select" : "select-trigger";
  const contentClass = size === "compact" ? "floating-popover__select-content" : "select-content";
  const itemClass = size === "compact" ? "floating-popover__select-item" : "select-item";
  const indicatorClass = size === "compact" ? "floating-popover__select-indicator" : "select-item-indicator";
  const groupLabelClass = size === "compact" ? "floating-popover__select-group-label" : "select-group-label";
  const separatorClass = size === "compact" ? "floating-popover__select-separator" : "select-separator";

  // Handle value change - load Google font if needed
  const handleValueChange = (newValue: string) => {
    loadGoogleFont(newValue);
    onValueChange(newValue);
  };

  // Get display label for current value
  const getDisplayLabel = (): string => {
    if (!value || value === DEFAULT_FONT_VALUE) {
      return DEFAULT_FONT_LABEL;
    }

    for (const group of groups) {
      const option = group.options.find((opt) => opt.value === value);
      if (option) {
        return option.label;
      }
    }

    return value;
  };

  return (
    <RadixSelect.Root value={value} onValueChange={handleValueChange} disabled={disabled}>
      <RadixSelect.Trigger className={`${triggerClass} ${className}`}>
        <RadixSelect.Value placeholder={placeholder}>{getDisplayLabel()}</RadixSelect.Value>
        <RadixSelect.Icon>
          <ChevronDownIcon className="w-4 h-4" />
        </RadixSelect.Icon>
      </RadixSelect.Trigger>
      <RadixSelect.Portal>
        <RadixSelect.Content className={contentClass} position="popper" sideOffset={4}>
          <RadixSelect.Viewport className="max-h-[300px]">
            {groups.map((group, groupIndex) => (
              <RadixSelect.Group key={group.label}>
                {groupIndex > 0 && <RadixSelect.Separator className={separatorClass} />}
                <RadixSelect.Label className={groupLabelClass}>{group.label}</RadixSelect.Label>
                {group.options.map((option) => (
                  <RadixSelect.Item
                    key={option.value}
                    value={option.value}
                    className={itemClass}
                    style={
                      option.group === "google" || option.group === "custom"
                        ? { fontFamily: `"${option.value}", sans-serif` }
                        : option.group === "standard"
                        ? { fontFamily: option.value }
                        : undefined
                    }
                  >
                    <RadixSelect.ItemText>{option.label}</RadixSelect.ItemText>
                    <RadixSelect.ItemIndicator className={indicatorClass}>
                      <CheckIcon className="w-3.5 h-3.5" />
                    </RadixSelect.ItemIndicator>
                  </RadixSelect.Item>
                ))}
              </RadixSelect.Group>
            ))}
          </RadixSelect.Viewport>
        </RadixSelect.Content>
      </RadixSelect.Portal>
    </RadixSelect.Root>
  );
}

export default FontSelect;
