import { useRecoilValue, useResetRecoilState } from "recoil";
import { ArrowCounterClockwise, CheckCircle, Link } from "@phosphor-icons/react";

import { useTransientState } from "@/hooks";
import {
  iconWeightAtom,
  iconSizeAtom,
  iconColorAtom,
  resetSettingsSelector,
} from "@/state";

import "./SettingsActions.css";

const SettingsActions = () => {
  const weight = useRecoilValue(iconWeightAtom);
  const size = useRecoilValue(iconSizeAtom);
  const color = useRecoilValue(iconColorAtom);
  const reset = useResetRecoilState(resetSettingsSelector);

  const [copied, setCopied] = useTransientState<boolean>(false, 2000);

  const copyDeepLinkToClipboard = () => {
    const paramString = new URLSearchParams([
      ["weight", weight.toString()],
      ["size", size.toString()],
      ["color", color.replace("#", "")],
    ]).toString();
    void navigator.clipboard
      ?.writeText(`${window.location.host}?${paramString}`)
      .then(() => {
        setCopied(true);
      })
      .catch(() => {
        alert("Clipboard permissions must be enabled to copy links!");
      });
  };

  return (
    <>
      <button
        className="action-button"
        title="Restore default settings"
        onClick={reset}
      >
        <ArrowCounterClockwise size={24} />
      </button>
      <button
        className="action-button"
        title="Copy URL for current settings"
        onClick={copyDeepLinkToClipboard}
      >
        {copied ? (
          <CheckCircle size={24} color="#1FA647" weight="fill" />
        ) : (
          <Link size={24} />
        )}
      </button>
    </>
  );
};

export default SettingsActions;