import React from 'react';

export interface PaletteDragPayload {
  type: 'operator' | 'indicator';
  value: string;
  label: string;
}

interface Props {
  type: 'operator' | 'indicator';
  value: string;
  label: string;
  desc?: string;
  color?: string;
  period?: string;
  onAdd: () => void;
}

export default function PaletteChip({ type, value, label, desc, color, period, onAdd }: Props) {
  const onDragStart = (e: React.DragEvent) => {
    const payload: PaletteDragPayload = { type, value, label };
    e.dataTransfer.setData('application/json', JSON.stringify(payload));
    e.dataTransfer.effectAllowed = 'copy';
  };

  return (
    <div
      draggable
      className={`se-palette-card ${color ? `se-palette-card--${color}` : 'se-palette-card--ind'}`}
      onDragStart={onDragStart}
      onClick={onAdd}
      role="button"
      tabIndex={0}
      onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') onAdd(); }}
    >
      <div className="se-palette-card-head">
        <span className="se-palette-card-icon">{label.slice(0, 1)}</span>
        <div className="se-palette-card-meta">
          <span className="se-palette-card-name">{label}</span>
          {desc ? <span className="se-palette-card-desc">{desc}</span> : null}
        </div>
      </div>
      {period ? (
        <div className="se-palette-card-period">
          <span>기간</span>
          <input readOnly value={period} className="se-palette-period-input" tabIndex={-1} />
          <span className="se-palette-sync" title="차트 지표 설정과 동기화">⟳</span>
        </div>
      ) : null}
    </div>
  );
}