Text editor toolbar

'use client';

import * as React from 'react';
import { cn } from '../lib/lunia-utils';
import { TooltipProvider } from '../tooltip/tooltip';
import { TextEditorToolbar } from './text-editor-toolbar';
import { ALIGN_TOOLS } from './text-editor-toolbar-variants';

function usePressed(initial: string[]) {
  const [pressed, setPressed] = React.useState(initial);
  const onToolPress = ({ tool, pressed: on }: { tool: string; pressed: boolean }) =>
    setPressed((list) => {
      const rest = list.filter(
        (t) =>
          t !== tool && (!on || !ALIGN_TOOLS.includes(tool as never) || !ALIGN_TOOLS.includes(t as never)),
      );
      return on ? [...rest, tool] : rest;
    });
  return { pressed, onToolPress };
}

const field = 'rounded-lg border border-primary bg-primary px-3.5 py-3 text-md text-primary shadow-xs';

export default function TextEditorToolbarDemo({ replay = 0 }: { replay?: number }) {
  const simple = usePressed(['left']);
  const advanced = usePressed(['left']);
  const floating = usePressed(['left']);
  const words = React.useRef<HTMLSpanElement>(null);
  const [selected, setSelected] = React.useState(false);

  const selectWords = React.useCallback(() => {
    const node = words.current;
    const selection = window.getSelection();
    if (!node || !selection) return;
    const range = document.createRange();
    range.selectNodeContents(node);
    selection.removeAllRanges();
    selection.addRange(range);
  }, []);

  React.useEffect(() => {
    const onChange = () => {
      const selection = window.getSelection();
      const node = words.current;
      setSelected(
        Boolean(
          node &&
            selection &&
            !selection.isCollapsed &&
            selection.rangeCount &&
            node.contains(selection.anchorNode),
        ),
      );
    };
    document.addEventListener('selectionchange', onChange);
    return () => document.removeEventListener('selectionchange', onChange);
  }, []);

  React.useEffect(() => {
    if (replay > 0) window.getSelection()?.removeAllRanges();
    const timer = window.setTimeout(selectWords, 300);
    return () => window.clearTimeout(timer);
  }, [replay, selectWords]);

  const anchor = React.useCallback(() => {
    const selection = window.getSelection();
    return selection?.rangeCount ? selection.getRangeAt(0).getBoundingClientRect() : null;
  }, []);

  const on = (tool: string) => floating.pressed.includes(tool);
  return (
    <TooltipProvider>
      <div className="flex w-full max-w-2xl flex-col gap-8">
        <div className="flex flex-col gap-3">
          <TextEditorToolbar pressed={simple.pressed} onToolPress={simple.onToolPress} />
          <div className={cn(field, 'min-h-20')}>Write a short note for the team.</div>
        </div>
        <div className="flex flex-col gap-3">
          <TextEditorToolbar type="advanced" pressed={advanced.pressed} onToolPress={advanced.onToolPress} />
          <div className={cn(field, 'min-h-20')}>Plan the release notes for version 2.4.</div>
        </div>
        <div className="flex flex-col gap-3 pt-14">
          <p className={field}>
            Lunia is a{' '}
            <span
              ref={words}
              className={cn(
                on('bold') && 'font-semibold',
                on('italic') && 'italic',
                on('underline') && 'underline',
              )}
            >
              motion first
            </span>{' '}
            design system for Next.js and Nuxt.
          </p>
          <TextEditorToolbar
            placement="floating"
            anchor={selected ? anchor : null}
            pressed={floating.pressed}
            onToolPress={floating.onToolPress}
          />
        </div>
      </div>
    </TooltipProvider>
  );
}