import React from 'react';
import { TemplateElement } from '../types';
import { CommitInput } from './CommitInput';

interface TextDisplayAffixFieldsProps {
  elem: TemplateElement;
  onChange: (elem: TemplateElement) => void;
}

const PropInput = CommitInput;

export const TextDisplayAffixFields: React.FC<TextDisplayAffixFieldsProps> = ({
  elem,
  onChange,
}) => (
  <div className="grid grid-cols-2 gap-2 pt-2 border-t border-[#3a3a3a]">
    <div>
      <label className="ps-field-label">前缀字符</label>
      <PropInput
        type="text"
        value={elem.textDisplayPrefix ?? ''}
        placeholder="如 ¥"
        onCommit={(val) =>
          onChange({
            ...elem,
            textDisplayPrefix: val || undefined,
          })
        }
        className="ps-field font-mono"
      />
    </div>
    <div>
      <label className="ps-field-label">后缀字符</label>
      <PropInput
        type="text"
        value={elem.textDisplaySuffix ?? ''}
        placeholder="如 元"
        onCommit={(val) =>
          onChange({
            ...elem,
            textDisplaySuffix: val || undefined,
          })
        }
        className="ps-field font-mono"
      />
    </div>
    <p className="col-span-2 text-[9px] text-[#666] leading-relaxed">
      在值提取完成后追加，仅影响显示；反选模式下会一并参与从原值中去除；不参与「内容值」显示条件判断
    </p>
  </div>
);