import clsx from "clsx";
import { useCallback } from "react";
import SliderUnstyled from "@mui/base/SliderUnstyled";

import toggleTheme from "libs/toggleTheme";

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

type FontSize = 12 | 14 | 16 | 18 | 20 | 24;
const fontSizes: FontSize[] = [12, 14, 16, 18, 20, 24];

const max = Math.max(...fontSizes);
const min = Math.min(...fontSizes);

const marks = [
  {
    value: 12,
    label: "12px",
  },
  {
    value: 14,
    label: "14px",
  },
  {
    value: 16,
    label: "16px",
  },
  {
    value: 18,
    label: "18px",
  },
  {
    value: 20,
    label: "20px",
  },
  {
    value: 24,
    label: "24px",
  },
];

interface SettingsProps {
  isSerif: boolean;
  fontSize: number;
  changeIsSerif: (isSerif: boolean) => void;
  changeFontSize: (fontSize: FontSize) => void;
  onChangeSettings: (type?: string) => void;
}

function valuetext(value: number) {
  return `${value}px`;
}

const Settings = (props: SettingsProps) => {
  const { isSerif, fontSize, changeIsSerif, changeFontSize, onChangeSettings } =
    props;

  const handleChangeFontSize = useCallback(
    (add = 1) => {
      const idx = fontSizes.findIndex((fs) => fs === fontSize);
      changeFontSize(
        fontSizes[Math.max(0, Math.min(fontSizes.length - 1, idx + add))]
      );
    },
    [changeFontSize, fontSize]
  );

  return (
    <div className={styles["toolbar-inner"]}>
      <div className={styles["toolbar-display-title"]}>
        Display Options
        <button
          className={styles["btn-close"]}
          onClick={() => onChangeSettings("")}
        >
          <svg className={styles["icon-close"]}>
            <use xlinkHref="/icons.svg#close"></use>
          </svg>
        </button>
      </div>
      <div className={styles["toolbar-display-label"]}>Background</div>
      <div className="btn-group w-full">
        <button
          className="btn btn-primary btn-dark-outline"
          onClick={() => toggleTheme("light")}
        >
          <svg className="icon-sun  mr-2">
            <use xlinkHref="/icons.svg#sun"></use>
          </svg>
          Light
        </button>
        <button
          className="btn btn-primary btn-light-outline"
          onClick={() => toggleTheme("dark")}
        >
          <svg className="icon-moon mr-2">
            <use xlinkHref="/icons.svg#moon"></use>
          </svg>
          Dark
        </button>
      </div>
      <div className={styles["toolbar-display-label"]}>Font</div>
      <div className="btn-group w-full">
        <button
          className={clsx("btn", "btn-primary", {
            "btn-outline": isSerif,
          })}
          onClick={() => changeIsSerif(false)}
        >
          Nunito Sans
        </button>
        <button
          className={clsx("btn", "btn-primary", {
            "btn-outline": !isSerif,
          })}
          onClick={() => changeIsSerif(true)}
        >
          Merriweather
        </button>
      </div>
      <div className={styles["toolbar-display-label"]}>Sizes</div>
      <div className="flex items-center">
        <button className="mr-5" onClick={() => handleChangeFontSize(-1)}>
          <svg className="w-5 h-5">
            <use xlinkHref="/icons.svg#font-dn"></use>
          </svg>
        </button>
        <SliderUnstyled
          aria-label="Font Size"
          value={fontSize}
          getAriaValueText={valuetext}
          step={null}
          marks={marks}
          min={min}
          max={max}
          className="w-0 flex-1"
          classes={{ ...styles, root: styles.slider }}
          onChange={(e, value) => changeFontSize(value as FontSize)}
        />
        <button className="ml-5" onClick={() => handleChangeFontSize(1)}>
          <svg className="w-5 h-5">
            <use xlinkHref="/icons.svg#font-up"></use>
          </svg>
        </button>
      </div>
    </div>
  );
};

export default Settings;
