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

import tg from "@/tg";
import ContentSurface from "@components/surface/ContentSurface";
import { BlueSurface } from "@components/surface/BlueSectionSurface";
import LightSurface from "@components/surface/LightSurface";

import BackIcon from "./icons/BackIcon";
import StartIcon from "./icons/StartIcon";
import classes from "./Pagination.module.css";
import { usePlaySound } from "@/audio";

type Props = {
  value: number;
  total: number;
  onChange?: (page: number) => unknown;
  variant?: "default" | "blue";
};

export default function Pagination({ value, total, onChange, variant = "default" }: Props) {
  const { t } = useTranslation();
  const play = usePlaySound();

  const isAtStart = value <= 1 || total <= 1;
  const isAtEnd = value >= total || total <= 1;
  const isBlue = variant === "blue";

  const Wrapper = isBlue ? BlueSurface : ContentSurface;
  const ItemSurface = isBlue ? motion.div : LightSurface;

  const itemClass = (...extra: Parameters<typeof clsx>) =>
    clsx(classes.item, isBlue ? classes.blueItem : undefined, ...extra);

  return (
    <Wrapper className={clsx(classes.wrapper, isBlue ? classes.blueWrapper : "rounded-full")}>
      <ItemSurface className={itemClass(classes.startItem)}>
        <motion.button
          type="button"
          whileTap={{ scale: 0.95 }}
          className={classes.button}
          onClick={() => {
            play("click");
            tg.hapticFeedback.click();
            onChange?.(1);
          }}
          disabled={isAtStart}
        >
          <StartIcon className="w-5 h-4.5" />
        </motion.button>
      </ItemSurface>

      <ItemSurface className={itemClass()}>
        <motion.button
          type="button"
          whileTap={{ scale: 0.95 }}
          className={classes.button}
          onClick={() => {
            play("click");
            tg.hapticFeedback.click();
            onChange?.(value - 1);
          }}
          disabled={isAtStart}
        >
          <BackIcon className="w-4 h-5" />
        </motion.button>
      </ItemSurface>

      <ItemSurface className={itemClass(classes.state)}>
        {value} {t("pagination.of")} {total}
      </ItemSurface>

      <ItemSurface className={itemClass()}>
        <motion.button
          type="button"
          whileTap={{ scale: 0.95 }}
          className={classes.button}
          onClick={() => {
            play("click");
            tg.hapticFeedback.click();
            onChange?.(value + 1);
          }}
          disabled={isAtEnd}
        >
          <BackIcon className={clsx("w-4 h-5", classes.mirrored)} />
        </motion.button>
      </ItemSurface>

      <ItemSurface className={itemClass(classes.endItem)}>
        <motion.button
          type="button"
          whileTap={{ scale: 0.95 }}
          className={classes.button}
          onClick={() => {
            play("click");
            tg.hapticFeedback.click();
            onChange?.(total);
          }}
          disabled={isAtEnd}
        >
          <StartIcon className={clsx("w-5 h-4.5", classes.mirrored)} />
        </motion.button>
      </ItemSurface>
    </Wrapper>
  );
}
