import React, { useCallback, CSSProperties } from 'react';
import { useEditor } from '@craftjs/core';
import {
  TEXT_COLORS,
  FONT_FAMILIES,
  TEXT_SIZES,
  FONT_WEIGHTS,
} from '../../../constants/presets';
import {
  StylePanelProps,
  SectionLabel,
  ColorSwatchGrid,
  PresetButtonGrid,
} from './shared';

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

  const setPropStyle = useCallback(
    (property: string, value: string) => {
      actions.setProp(selectedId, (props: any) => {
        props.style = { ...props.style, [property]: value };
      });
    },
    [actions, 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>
    </>
  );
};