import { Button } from "antd";
import TopIcon from "components/Icons/TopIcon";
import { useScrollHandler } from "contexts/ScrollHandlerContext";
import useBreakPoint from "hooks/useBreakPoint";
import { useCallback } from "react";
import { useAppSelector } from "redux/hooks";
import { colors } from "ThemeConstants";
import styles from "./FloatingButton.module.css";

export function FloatingButton() {
  const { isRTL } = useAppSelector((state) => state.locale);
  const { themeName } = useAppSelector((state) => state.theme);
  const { isMobile, isTablet } = useBreakPoint();

  const { showScrollTop } = useScrollHandler();

  const scrollToTop = useCallback(() => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  }, []);

  return (
    <>
      {/* Floating Scroll to Top Button */}
      {showScrollTop && (
        <Button
          type="primary"
          shape="circle"
          size={isMobile ? "large" : "large"}
          icon={<TopIcon />}
          onClick={scrollToTop}
          className={`${styles.scrollToTopButton}`}
          style={{
            position: "fixed",
            bottom: isMobile ? "100px" : isTablet ? "100px" : "20px",
            right: isRTL ? "auto" : "20px",
            left: isRTL ? "20px" : "auto",
            zIndex: 1000,
            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
            backgroundColor:
              themeName === "dark" ? colors.primary : colors.primary,
            borderColor: themeName === "dark" ? colors.primary : colors.primary,
            width: isMobile ? 48 : 56,
            height: isMobile ? 48 : 56,
          }}
        />
      )}
    </>
  );
}