"use client";

import { useState, type MouseEvent, type ReactNode } from "react";

import IconButton from "@mui/material/IconButton";
import { alpha, useTheme } from "@mui/material/styles";

import { ExportArrowIcon } from "@/components/dashboard/dashboard-icons";
import {
  ExportFormatMenu,
  type ExportFormat,
} from "@/components/ui/export-format-menu";
import { SaveIcon } from "@/components/ui/icon";

export type { ExportFormat as ChartExportFormat } from "@/components/ui/export-format-menu";
export { EXPORT_FORMATS as CHART_EXPORT_FORMATS } from "@/components/ui/export-format-menu";

export type ChartExportMenuButtonProps = {
  onExport?: (format: ExportFormat) => void;
  variant?: "filled" | "ghost";
  icon?: ReactNode;
};

export function ChartExportMenuButton({
  onExport,
  variant = "filled",
  icon,
}: ChartExportMenuButtonProps) {
  const theme = useTheme();
  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
  const open = Boolean(anchorEl);

  const handleOpen = (event: MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const handleSelect = (format: ExportFormat) => {
    onExport?.(format);
    handleClose();
  };

  const isDark = theme.palette.mode === "dark";
  const isFilled = variant === "filled";

  return (
    <>
      <IconButton
        onClick={handleOpen}
        aria-label="Export chart"
        aria-haspopup="menu"
        aria-expanded={open ? "true" : undefined}
        sx={{
          width: 28,
          height: 28,
          borderRadius: "8px",
          color: theme.palette.primary.main,
          bgcolor: isFilled
            ? alpha(theme.palette.primary.main, isDark ? 0.12 : 0.08)
            : "transparent",
          border: isFilled
            ? `1px solid ${alpha(theme.palette.primary.main, 0.2)}`
            : "none",
          p: 0,
          transition: "all 0.2s ease",
          "&:hover": {
            bgcolor: isFilled
              ? alpha(theme.palette.primary.main, isDark ? 0.2 : 0.14)
              : "transparent",
          },
        }}
      >
        {icon ??
          (isFilled ? (
            <ExportArrowIcon sx={{ fontSize: 18 }} />
          ) : (
            <SaveIcon sx={{ fontSize: 18 }} />
          ))}
      </IconButton>

      <ExportFormatMenu
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        onSelect={handleSelect}
      />
    </>
  );
}