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

import Modal from "@components/modals/Modal";
import ContentSurface from "@components/surface/ContentSurface";
import DarkSurface from "@components/surface/DarkSurface";
import { useLanguages } from "@/i18n/useLanguages";
import { usePlaySound } from "@/audio";
import tg from "@/tg";

import classes from "./LanguageModal.module.css";
import LightSurface from "@components/surface/LightSurface";
import clsx from "clsx";

type Props = {
  open: boolean;
  onClose: () => void;
  onBack: () => void;
};

export default function LanguageModal({ open, onClose, onBack }: Props) {
  const { t } = useTranslation();
  const { languages, current, setLanguage } = useLanguages();
  const play = usePlaySound();

  const handleSelect = (key: string) => {
    play("click");
    tg.hapticFeedback.click();
    setLanguage(key);
    onClose();
  };

  const handleBack = () => {
    play("click");
    tg.hapticFeedback.click();
    onBack();
  };

  return (
    <Modal className="w-full" open={open} onClose={onClose}>
      <div className={classes.grid}>
        {languages.map((lang) => (
          <ContentSurface
            key={lang.key}
            className={clsx(classes.contentSurface, lang.key === current.key && classes.active)}
          >
            <LightSurface className="rounded-full">
              <motion.button
                className={classes.item}
                onClick={() => handleSelect(lang.key)}
                whileTap={{ scale: 0.95 }}
              >
                <div className={classes.langIcon}>
                  <img src={lang.image} alt={lang.label} />
                </div>
                <span>{lang.label}</span>
              </motion.button>
            </LightSurface>
          </ContentSurface>
        ))}

        <ContentSurface className={classes.contentSurface}>
          <DarkSurface className="rounded-full h-full">
            <motion.button
              className={clsx(classes.item, "justify-center text-white text-lg")}
              onClick={handleBack}
              whileTap={{ scale: 0.95 }}
            >
              <span>{t("settings.back")}</span>
            </motion.button>
          </DarkSurface>
        </ContentSurface>
      </div>
    </Modal>
  );
}
