import React from 'react';
import { colorPickerPreviewValue, colorValueUsesVariable } from '../colorUtils';
import { CommitInput } from './CommitInput';

interface ColorValueFieldProps {
  label?: string;
  value: string;
  onChange: (value: string) => void;
  variableOptions?: string[];
  defaultColor?: string;
  placeholder?: string;
  className?: string;
  hint?: string;
}

export const ColorValueField: React.FC<ColorValueFieldProps> = ({
  label,
  value,
  onChange,
  variableOptions = [],
  defaultColor = '#111827',
  placeholder = '#111827',
  className = '',
  hint,
}) => {
  const usesVariable = colorValueUsesVariable(value);
  const pickerValue = colorPickerPreviewValue(value, defaultColor);

  return (
    <div className={className}>
      {label && <label className="ps-field-label">{label}</label>}
      <div className="flex gap-1 items-center">
        <input
          type="color"
          value={pickerValue}
          disabled={usesVariable}
          onChange={(e) => onChange(e.target.value)}
          className="color-input shrink-0 disabled:opacity-40"
          title={usesVariable ? '当前为变量颜色，请使用文本框编辑' : undefined}
        />
        <CommitInput
          type="text"
          value={value}
          placeholder={placeholder}
          onCommit={onChange}
          className="ps-field font-mono text-[11px] flex-1 min-w-0"
        />
      </div>
      {variableOptions.length > 0 && (
        <div className="flex flex-wrap gap-1 mt-1.5">
          {variableOptions.map((v) => (
            <button
              key={v}
              type="button"
              onClick={() => {
                const token = `{${v}}`;
                onChange(value.includes(token) ? value : value ? `${value} ${token}` : token);
              }}
              className="ps-btn text-[9px] font-mono"
            >
              {`{${v}}`}
            </button>
          ))}
        </div>
      )}
      {hint && <p className="text-[9px] text-[#666] mt-1 leading-relaxed">{hint}</p>}
      {!hint && variableOptions.length > 0 && (
        <p className="text-[9px] text-[#666] mt-1 leading-relaxed">
          支持 hex/rgb/transparent 或 {`{变量名}`}；排版印刷色彩模式下按行数据解析
        </p>
      )}
    </div>
  );
};