import React, { CSSProperties } from 'react';
import {
  TEXT_COLORS,
  FONT_FAMILIES,
  TEXT_SIZES,
  FONT_WEIGHTS,
} from '../../../constants/presets';
import {
  StylePanelProps,
  SectionLabel,
  ColorSwatchGrid,
  PresetButtonGrid,
  useNodeProp,
} from './shared';

/* ---------- TEXT ---------- */
export const TextStylePanel: React.FC<StylePanelProps> = ({ selectedId, nodeProps }) => {
  const style: CSSProperties = nodeProps.style || {};

  const { setPropStyle } = useNodeProp(selectedId);

  return (
    <>
      <div className="guided-section">
        <SectionLabel>Text Color</SectionLabel>
        <ColorSwatchGrid
          colors={TEXT_COLORS}
          activeValue={style.color as string}
          onSelect={(v) => setPropStyle('color', v)}
        />
      </div>
      <div className="guided-section">
        <SectionLabel>Font Family</SectionLabel>
        <PresetButtonGrid
          presets={FONT_FAMILIES}
          activeValue={style.fontFamily as string}
          onSelect={(v) => setPropStyle('fontFamily', v)}
        />
      </div>
      <div className="guided-section">
        <SectionLabel>Text Size</SectionLabel>
        <PresetButtonGrid
          presets={TEXT_SIZES}
          activeValue={style.fontSize as string}
          onSelect={(v) => setPropStyle('fontSize', v)}
        />
      </div>
      <div className="guided-section">
        <SectionLabel>Font Weight</SectionLabel>
        <PresetButtonGrid
          presets={FONT_WEIGHTS}
          activeValue={String(style.fontWeight || '')}
          onSelect={(v) => setPropStyle('fontWeight', v)}
        />
      </div>
      <div className="guided-section">
        <SectionLabel>Alignment</SectionLabel>
        <div className="preset-grid align-grid">
          {(['left', 'center', 'right', 'justify'] as const).map((a) => (
            <button
              key={a}
              className={`preset-btn ${style.textAlign === a ? 'active' : ''}`}
              onClick={() => setPropStyle('textAlign', a)}
              title={a}
            >
              <i className={`fa fa-align-${a}`} />
            </button>
          ))}
        </div>
      </div>
    </>
  );
};