import { useTranslation } from "react-i18next";
import { motion } from "motion/react";

import Modal from "@components/modals/Modal";
import ContentSurface from "@components/surface/ContentSurface";
import LightSurface from "@components/surface/LightSurface";
import SwitchInput from "@components/form/SwitchInput";
import { useAudioSettings, usePlaySound } from "@/audio";
import tg from "@/tg";

import classes from "./SettingsModal.module.css";
import { useLanguages } from "@/i18n/useLanguages";

export type SettingsModalId = "faq" | "account" | "support" | "transactionsHistory" | "language";

type Props = {
  open: boolean;
  onClose: () => void;
  onNavigate: (modal: SettingsModalId) => void;
  liftIds?: string[];
};

export default function SettingsModal({ open, onClose, onNavigate, liftIds }: Props) {
  const { t } = useTranslation();
  const { current } = useLanguages();
  const { isEnabled, setIsEnabled } = useAudioSettings();
  const play = usePlaySound();

  const handleNavigate = (modal: SettingsModalId) => {
    play("click");
    tg.hapticFeedback.click();
    onNavigate(modal);
  };

  return (
    <Modal className="w-full max-w-67.5" open={open} onClose={onClose} liftIds={liftIds}>
      <div className={classes.items}>
        <ContentSurface className={classes.contentSurface}>
          <LightSurface className={classes.lightSurface}>
            <motion.button
              className={classes.item}
              onClick={() => handleNavigate("faq")}
              whileTap={{ scale: 0.95 }}
            >
              {t("settings.faq")}
            </motion.button>
          </LightSurface>
        </ContentSurface>

        <ContentSurface className={classes.contentSurface}>
          <LightSurface className={classes.lightSurface}>
            <motion.button
              className={classes.item}
              onClick={() => handleNavigate("account")}
              whileTap={{ scale: 0.95 }}
            >
              {t("settings.accountInfo")}
            </motion.button>
          </LightSurface>
        </ContentSurface>

        <ContentSurface className={classes.contentSurface}>
          <LightSurface className={classes.lightSurface}>
            <motion.button
              className={classes.item}
              onClick={() => handleNavigate("support")}
              whileTap={{ scale: 0.95 }}
            >
              {t("settings.support")}
            </motion.button>
          </LightSurface>
        </ContentSurface>

        <ContentSurface className={classes.contentSurface}>
          <LightSurface className={classes.lightSurface}>
            <motion.button
              className={classes.item}
              onClick={() => handleNavigate("transactionsHistory")}
              whileTap={{ scale: 0.95 }}
            >
              {t("settings.transactionHistory")}
            </motion.button>
          </LightSurface>
        </ContentSurface>

        <ContentSurface className={classes.contentSurface}>
          <LightSurface className={classes.lightSurface}>
            <div className={classes.itemRow}>
              <span>{t("settings.sound")}</span>
              <SwitchInput
                value={isEnabled}
                onChange={(value) => {
                  setIsEnabled(value);
                  if (value) play("click", { force: true });
                }}
              />
            </div>
          </LightSurface>
        </ContentSurface>

        <ContentSurface className={classes.contentSurface}>
          <LightSurface className={classes.lightSurface}>
            <motion.button
              className={classes.itemRow}
              onClick={() => handleNavigate("language")}
              whileTap={{ scale: 0.95 }}
            >
              <span>{t("settings.language")}</span>
              <div className={classes.langIcon}>
                <img src={current.image} alt="lang" />
              </div>
            </motion.button>
          </LightSurface>
        </ContentSurface>
      </div>
    </Modal>
  );
}
