"use client";

import { PopComponentRegistry } from "../../PopComponentRegistry";
import { PopSearchComponent } from "./PopSearchComponent";
import { PopSearchConfigPanel } from "./PopSearchConfig";
import type { PopSearchConfig } from "./types";

const defaultConfig: PopSearchConfig = {
  inputType: "text",
  fieldName: "",
  placeholder: "검색어 입력",
  debounceMs: 500,
  triggerOnEnter: true,
  labelPosition: "top",
  labelText: "",
  labelVisible: true,
};

function PopSearchPreviewComponent({ config, label }: { config?: PopSearchConfig; label?: string }) {
  const cfg = config || defaultConfig;
  const displayLabel = label || cfg.fieldName || "검색";

  return (
    <div className="flex h-full w-full flex-col items-center justify-center gap-1 p-2">
      <span className="text-[10px] font-medium text-muted-foreground">
        {displayLabel}
      </span>
      <div className="flex h-6 w-full items-center rounded border border-dashed border-muted-foreground/30 px-2">
        <span className="text-[9px] text-muted-foreground">
          {cfg.placeholder || cfg.inputType}
        </span>
      </div>
    </div>
  );
}

PopComponentRegistry.registerComponent({
  id: "pop-search",
  name: "검색",
  description: "조건 입력 (텍스트/날짜/선택/모달)",
  category: "input",
  icon: "Search",
  component: PopSearchComponent,
  configPanel: PopSearchConfigPanel,
  preview: PopSearchPreviewComponent,
  defaultProps: defaultConfig,
  touchOptimized: true,
  supportedDevices: ["mobile", "tablet"],
});