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

import { AppButton, AppSecondaryButton } from "@/components/ui/button";
import { getFormBorderColor } from "@/components/ui/form";

type DialogFooterProps = {
  isFormFilled: boolean;
  isSaving: boolean;
  onSaveDraft: () => void;
  onSubmitIssue: () => void;
  saveLabel?: string;
};

export function DialogFooter({
  isFormFilled,
  isSaving,
  onSaveDraft,
  onSubmitIssue,
  saveLabel = "Save",
}: DialogFooterProps) {
  const theme = useTheme();

  return (
    <Box
      sx={{
        px: 2,
        py: 1.5,
        borderTop: `1px solid ${getFormBorderColor(theme)}`,
        display: "flex",
        justifyContent: "flex-end",
        gap: 2,
        bgcolor: theme.palette.background.paper,
      }}
    >
      <AppSecondaryButton
        disabled={isSaving || !isFormFilled}
        onClick={onSaveDraft}
        sx={{
          width: 125,
          minWidth: 125,
          height: 36,
          minHeight: 36,
          color: isFormFilled
            ? theme.palette.primary.main
            : theme.palette.text.primary,
          borderColor: isFormFilled
            ? theme.palette.primary.main
            : getFormBorderColor(theme),
          bgcolor: theme.palette.background.paper,
          fontWeight: 700,
          fontSize: 12,
          "&:hover": {
            borderColor: theme.palette.primary.main,
            bgcolor: alpha(theme.palette.primary.main, 0.08),
          },
        }}
      >
        {isSaving ? "Saving..." : "Draft"}
      </AppSecondaryButton>

      <AppButton
        disabled={isSaving || !isFormFilled}
        onClick={onSubmitIssue}
        sx={{
          width: 125,
          minWidth: 125,
          height: 36,
          minHeight: 36,
          bgcolor: isFormFilled ? theme.palette.primary.main : "#7B828D",
          fontWeight: 700,
          fontSize: 12,
          "&:hover": {
            bgcolor: isFormFilled ? theme.palette.primary.dark : "#6B7280",
          },
        }}
      >
        {isSaving ? "Saving..." : saveLabel}
      </AppButton>
    </Box>
  );
}