import clsx from "clsx";
import { useRouter } from "next/router";

import styles from "./styles.module.scss";

export default function PreviewBar() {
  const router = useRouter();

  const exitPreview = () => {
    const toRoute = {
      pathname: "/api/cancel-preview",
      query: {
        redirect_url: window?.location.href,
      },
    };
    router.push(toRoute);
  };

  const alertBeforeExit = () => {
    if (confirm("Exit preview mode?")) {
      exitPreview();
    }
  };

  const handleClick = () => {
    alertBeforeExit();
  };

  return (
    <button className={styles.previewBar} onClick={handleClick}>
      <span className={clsx(styles.label, styles.previewLabel)}>
        Preview mode
      </span>
      <span className={clsx(styles.label, styles.exitLabel)}>
        Exit preview?
      </span>
    </button>
  );
}