import {
  Header1Small,
  Header2Small,
  Header3Small,
} from "components/Icons/BlockTextSmall";
import { Props } from "components/Icons/Props";
import { QuoteSmall } from "components/Icons/QuoteSmall";
import { ShortcutKey, Separator } from "components/Layout";
import { ToolbarButton } from "components/Toolbar";
import { getSelectedOrFocusedBlocks } from "components/SelectionManager/selectionState";
import { TextSelection } from "prosemirror-state";
import { useCallback } from "react";
import { useEntity, useReplicache } from "src/replicache";
import { useEditorStates } from "src/state/useEditorState";
import { useUIState } from "src/useUIState";
import { setTextBlockStyle, TextBlockStyle } from "src/utils/blockTypeOperations";

export const TextBlockTypeToolbar = (props: {
  onClose: () => void;
  className?: string;
}) => {
  let focusedBlock = useUIState((s) => s.focusedEntity);
  let blockType = useEntity(focusedBlock?.entityID || null, "block/type");
  let headingLevel = useEntity(
    focusedBlock?.entityID || null,
    "block/heading-level",
  );

  let textSize = useEntity(focusedBlock?.entityID || null, "block/text-size");
  let { rep, undoManager } = useReplicache();

  let setStyle = useCallback(
    async (style: TextBlockStyle) => {
      if (!rep) return;
      // Changing block/type remounts the focused block's editor, so stash the
      // caret and put it back afterwards or the user is dropped out of the doc.
      let focused = useUIState.getState().focusedEntity;
      let previousSelection =
        focused?.entityType === "block"
          ? useEditorStates.getState().editorStates[focused.entityID]?.editor
              .selection
          : undefined;

      let blocks = await getSelectedOrFocusedBlocks(rep);
      await setTextBlockStyle(blocks, style, rep, undoManager);

      // Refocusing would collapse a multi-block selection down to one editor.
      if (blocks.length !== 1) return;
      if (!focused || focused.entityType !== "block" || !previousSelection)
        return;
      let newEditor = useEditorStates.getState().editorStates[focused.entityID];
      if (!newEditor) return;
      newEditor.view?.dispatch(
        newEditor.editor.tr.setSelection(
          TextSelection.create(
            newEditor.editor.doc,
            Math.min(previousSelection.anchor, newEditor.editor.doc.content.size),
          ),
        ),
      );
      newEditor.view?.focus();
    },
    [rep, undoManager],
  );
  let setLevel = useCallback(
    (level: number) => setStyle({ style: "heading", level }),
    [setStyle],
  );
  return (
    // This Toolbar should close once the user starts typing again
    <>
      <ToolbarButton
        className={props.className}
        onClick={() => {
          setLevel(1);
        }}
        active={
          blockType?.data.value === "heading" && headingLevel?.data.value === 1
        }
        tooltipContent={
          <div className="flex flex-col justify-center">
            <div className="font-bold text-center">Title</div>
            <div className="flex gap-1 font-normal">
              start line with
              <ShortcutKey>#</ShortcutKey>
            </div>
          </div>
        }
      >
        <Header1Small />
      </ToolbarButton>
      <ToolbarButton
        className={props.className}
        onClick={() => {
          setLevel(2);
        }}
        active={
          blockType?.data.value === "heading" && headingLevel?.data.value === 2
        }
        tooltipContent={
          <div className="flex flex-col justify-center">
            <div className="font-bold text-center">Heading</div>
            <div className="flex gap-1 font-normal">
              start line with
              <ShortcutKey>##</ShortcutKey>
            </div>
          </div>
        }
      >
        <Header2Small />
      </ToolbarButton>
      <ToolbarButton
        className={props.className}
        onClick={() => {
          setLevel(3);
        }}
        active={
          blockType?.data.value === "heading" && headingLevel?.data.value === 3
        }
        tooltipContent={
          <div className="flex flex-col justify-center">
            <div className="font-bold text-center">Subheading</div>
            <div className="flex gap-1 font-normal">
              start line with
              <ShortcutKey>###</ShortcutKey>
            </div>
          </div>
        }
      >
        <Header3Small />
      </ToolbarButton>
      <Separator classname="h-6!" />
      <ToolbarButton
        className={`px-[6px] ${props.className}`}
        onClick={() => setStyle({ style: "text", size: "default" })}
        active={
          blockType?.data.value === "text" &&
          textSize?.data.value !== "small" &&
          textSize?.data.value !== "large"
        }
        tooltipContent={<div>Normal Text</div>}
      >
        Text
      </ToolbarButton>
      <ToolbarButton
        className={`px-[6px] text-lg ${props.className}`}
        onClick={() => setStyle({ style: "text", size: "large" })}
        active={
          blockType?.data.value === "text" && textSize?.data.value === "large"
        }
        tooltipContent={<div>Large Text</div>}
      >
        <div className="leading-[1.625rem]">Large</div>
      </ToolbarButton>
      <ToolbarButton
        className={`px-[6px] text-sm text-secondary ${props.className}`}
        onClick={() => setStyle({ style: "text", size: "small" })}
        active={
          blockType?.data.value === "text" && textSize?.data.value === "small"
        }
        tooltipContent={<div>Small Text</div>}
      >
        <div className="leading-[1.625rem]">Small</div>
      </ToolbarButton>
      <Separator classname="h-6!" />
      <ToolbarButton
        className={props.className}
        onClick={() =>
          setStyle(
            blockType?.data.value === "blockquote"
              ? { style: "text", size: "default" }
              : { style: "blockquote" },
          )
        }
        active={blockType?.data.value === "blockquote"}
        tooltipContent={
          <div className="flex flex-col justify-center">
            <div className="font-bold text-center">Block Quote</div>
            <div className="flex gap-1 font-normal">
              start line with
              <ShortcutKey>&gt;</ShortcutKey>
            </div>
          </div>
        }
      >
        <QuoteSmall />
      </ToolbarButton>
    </>
  );
};

export function TextBlockTypeButton(props: {
  setToolbarState: (s: "heading") => void;
  className?: string;
}) {
  return (
    <ToolbarButton
      tooltipContent={<div>Text Style</div>}
      className={`${props.className}`}
      onClick={() => {
        props.setToolbarState("heading");
      }}
    >
      <TextSizeSmall />
    </ToolbarButton>
  );
}

const TextSizeSmall = (props: Props) => {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M14.3435 12.6008C14.4028 12.7825 14.6587 12.7855 14.7222 12.6052L14.8715 12.1816H19.0382L19.8657 14.6444C19.9067 14.7666 20.0212 14.8489 20.15 14.8489H21.6021C21.809 14.8489 21.9538 14.6443 21.885 14.4491L18.2831 4.23212C18.2408 4.11212 18.1274 4.03186 18.0002 4.03186H16.0009C15.8761 4.03186 15.7643 4.10917 15.7203 4.22598L13.5539 9.96923C13.5298 10.0331 13.5282 10.1033 13.5494 10.1682L14.3435 12.6008ZM18.5093 10.6076L17.0588 6.29056C17.0507 6.26644 17.0281 6.25019 17.0027 6.25019C16.9775 6.25019 16.9552 6.26605 16.9468 6.28974L15.4259 10.6076H18.5093ZM4.57075 19.9682C4.69968 19.9682 4.81418 19.8858 4.85518 19.7636L5.98945 16.3815H11.4579L12.5943 19.7637C12.6353 19.8859 12.7498 19.9682 12.8787 19.9682H15.0516C15.2586 19.9682 15.4034 19.7636 15.3346 19.5684L10.4182 5.62298C10.3759 5.50299 10.2625 5.42273 10.1353 5.42273H7.30723C7.17995 5.42273 7.06652 5.50305 7.02425 5.62311L2.11475 19.5686C2.04604 19.7637 2.19084 19.9682 2.39772 19.9682H4.57075ZM10.7468 14.2651L8.79613 8.45953C8.78532 8.42736 8.75517 8.40568 8.72123 8.40568C8.68728 8.40568 8.65712 8.42738 8.64633 8.45957L6.69928 14.2651H10.7468Z"
        fill="currentColor"
      />
    </svg>
  );
};