import { Camera, FolderOpen, RefreshCw, Save } from "lucide-react";
import { useState } from "react";

import { postJson } from "../api/controlApi";

export function StackPresetToolbar({
  presetName,
  selectedPresetName,
  stackPresets,
  onPresetNameChange,
  onSelectedPresetNameChange,
}) {
  const [screenshotQueued, setScreenshotQueued] = useState(false);
  const trimmedPresetName = presetName.trim();
  const normalizedPresetName = trimmedPresetName
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/^-+|-+$/g, "");
  const willOverwrite = normalizedPresetName ? stackPresets.includes(normalizedPresetName) : false;

  async function requestScreenshot() {
    setScreenshotQueued(true);
    try {
      await postJson("/api/screenshot", {});
    } finally {
      window.setTimeout(() => setScreenshotQueued(false), 1200);
    }
  }

  return (
    <div className="panel stack-panel">
      <div className="panel__header stack-panel__header">
        <div>
          <h3>Stack presets</h3>
          <p className="muted">Save or recall the current layer chain.</p>
        </div>
        <div className="stack-panel__actions">
          <button
            type="button"
            className="button-with-icon stack-panel__screenshot"
            onClick={requestScreenshot}
          >
            <Camera size={16} strokeWidth={1.9} aria-hidden="true" />
            <span>{screenshotQueued ? "Queued" : "Screenshot"}</span>
          </button>
          <button
            type="button"
            className="button-with-icon stack-panel__reload"
            onClick={() => postJson("/api/reload", {})}
          >
            <RefreshCw size={16} strokeWidth={1.9} aria-hidden="true" />
            <span>Reload shaders</span>
          </button>
        </div>
      </div>

      <div className="stack-panel__grid">
        <div className="toolbar__group">
          <label htmlFor="preset-name">Save stack</label>
          <div className="toolbar__inline">
            <input
              id="preset-name"
              type="text"
              placeholder="Preset name"
              value={presetName}
              onChange={(event) => onPresetNameChange(event.target.value)}
            />
            <button
              type="button"
              className={`button-with-icon${willOverwrite ? " stack-panel__save--overwrite" : ""}`}
              disabled={!trimmedPresetName}
              onClick={async () => {
                if (!trimmedPresetName) {
                  return;
                }
                const response = await postJson("/api/stack-presets/save", { presetName: trimmedPresetName });
                if (response?.ok) {
                  onSelectedPresetNameChange(normalizedPresetName);
                  onPresetNameChange("");
                }
              }}
            >
              <Save size={16} strokeWidth={1.9} aria-hidden="true" />
              <span>{willOverwrite ? "Overwrite" : "Save"}</span>
            </button>
          </div>
          {trimmedPresetName ? (
            <p className="muted toolbar__status" role="status">
              {willOverwrite
                ? `This will overwrite the existing preset "${normalizedPresetName}".`
                : `This will save as "${normalizedPresetName}".`}
            </p>
          ) : (
            <p className="muted toolbar__status toolbar__status--placeholder" aria-hidden="true">
              Preset status
            </p>
          )}
        </div>

        <div className="toolbar__group">
          <label htmlFor="preset-select">Recall stack</label>
          <div className="toolbar__inline">
            <select
              id="preset-select"
              value={selectedPresetName}
              onChange={(event) => onSelectedPresetNameChange(event.target.value)}
            >
              {stackPresets.length === 0 ? <option value="">No presets</option> : null}
              {stackPresets.map((preset) => (
                <option key={preset} value={preset}>
                  {preset}
                </option>
              ))}
            </select>
            <button
              type="button"
              className="button-with-icon"
              disabled={!selectedPresetName}
              onClick={() => {
                if (selectedPresetName) {
                  postJson("/api/stack-presets/load", { presetName: selectedPresetName });
                }
              }}
            >
              <FolderOpen size={16} strokeWidth={1.9} aria-hidden="true" />
              <span>Recall</span>
            </button>
          </div>
          <p className="muted toolbar__status toolbar__status--placeholder" aria-hidden="true">
            Preset status
          </p>
        </div>
      </div>
    </div>
  );
}
