"use client";

import React from "react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { TextDisplayConfig } from "./types";

export interface TextDisplayConfigPanelProps {
  config: TextDisplayConfig;
  onChange: (config: Partial<TextDisplayConfig>) => void;
}

/**
 * TextDisplay 설정 패널
 * 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
 */
export const TextDisplayConfigPanel: React.FC<TextDisplayConfigPanelProps> = ({
  config,
  onChange,
}) => {
  const handleChange = (key: keyof TextDisplayConfig, value: any) => {
    onChange({ [key]: value });
  };

  return (
    <div className="space-y-4">
      <div className="text-sm font-medium">
        텍스트 표시 설정
      </div>

      {/* 표시할 텍스트 */}
      <div className="space-y-2">
        <Label htmlFor="text">표시할 텍스트</Label>
        <Input
          id="text"
          value={config.text || ""}
          onChange={(e) => handleChange("text", e.target.value)}
          placeholder="표시할 텍스트를 입력하세요"
        />
      </div>

      {/* 폰트 크기 */}
      <div className="space-y-2">
        <Label htmlFor="fontSize">폰트 크기</Label>
        <Input
          id="fontSize"
          value={config.fontSize || ""}
          onChange={(e) => handleChange("fontSize", e.target.value)}
          placeholder="14px"
        />
      </div>

      {/* 폰트 굵기 */}
      <div className="space-y-2">
        <Label htmlFor="fontWeight">폰트 굵기</Label>
        <Select
          value={config.fontWeight || "normal"}
          onValueChange={(value) => handleChange("fontWeight", value)}
        >
          <SelectTrigger>
            <SelectValue placeholder="폰트 굵기 선택" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="normal">보통</SelectItem>
            <SelectItem value="bold">굵게</SelectItem>
            <SelectItem value="lighter">얇게</SelectItem>
            <SelectItem value="100">100</SelectItem>
            <SelectItem value="200">200</SelectItem>
            <SelectItem value="300">300</SelectItem>
            <SelectItem value="400">400</SelectItem>
            <SelectItem value="500">500</SelectItem>
            <SelectItem value="600">600</SelectItem>
            <SelectItem value="700">700</SelectItem>
            <SelectItem value="800">800</SelectItem>
            <SelectItem value="900">900</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* 텍스트 색상 */}
      <div className="space-y-2">
        <Label htmlFor="color">텍스트 색상</Label>
        <Input
          id="color"
          type="color"
          value={config.color || "#3b83f6"}
          onChange={(e) => handleChange("color", e.target.value)}
        />
      </div>

      {/* 텍스트 정렬 */}
      <div className="space-y-2">
        <Label htmlFor="textAlign">텍스트 정렬</Label>
        <Select
          value={config.textAlign || "left"}
          onValueChange={(value) => handleChange("textAlign", value)}
        >
          <SelectTrigger>
            <SelectValue placeholder="정렬 방식 선택" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="left">왼쪽 정렬</SelectItem>
            <SelectItem value="center">가운데 정렬</SelectItem>
            <SelectItem value="right">오른쪽 정렬</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* 배경색 */}
      <div className="space-y-2">
        <Label htmlFor="backgroundColor">배경색</Label>
        <Input
          id="backgroundColor"
          type="color"
          value={config.backgroundColor || "#ffffff"}
          onChange={(e) => handleChange("backgroundColor", e.target.value)}
        />
      </div>

      {/* 패딩 */}
      <div className="space-y-2">
        <Label htmlFor="padding">패딩</Label>
        <Input
          id="padding"
          value={config.padding || ""}
          onChange={(e) => handleChange("padding", e.target.value)}
          placeholder="8px"
        />
      </div>

      {/* 모서리 둥글기 */}
      <div className="space-y-2">
        <Label htmlFor="borderRadius">모서리 둥글기</Label>
        <Input
          id="borderRadius"
          value={config.borderRadius || ""}
          onChange={(e) => handleChange("borderRadius", e.target.value)}
          placeholder="4px"
        />
      </div>

      {/* 테두리 */}
      <div className="space-y-2">
        <Label htmlFor="border">테두리</Label>
        <Input
          id="border"
          value={config.border || ""}
          onChange={(e) => handleChange("border", e.target.value)}
          placeholder="1px solid #d1d5db"
        />
      </div>

      {/* 비활성화 */}
      <div className="space-y-2">
        <Label htmlFor="disabled">비활성화</Label>
        <Checkbox
          id="disabled"
          checked={config.disabled || false}
          onCheckedChange={(checked) => handleChange("disabled", checked)}
        />
      </div>
    </div>
  );
};