"use client";

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;
  onClose: () => void;
  onDraft: () => void;
  onSave: () => void;
};

export function DialogFooter({
  isFormFilled,
  onClose,
  onDraft,
  onSave,
}: DialogFooterProps) {
  const theme = useTheme();

  return (
    <Box
      sx={{
        px: 2,
        py: 1.5,
        borderTop: `1px solid ${getFormBorderColor(theme)}`,
        display: "flex",
        justifyContent: "flex-end",
        alignItems: "center",
        gap: 2,
        bgcolor: theme.palette.background.paper,
      }}
    >
      <AppSecondaryButton
        type="button"
        onClick={onDraft}
        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
            ),
          },
        }}
      >
        Draft
      </AppSecondaryButton>

      <AppButton
        type="button"
        onClick={onSave}
        disabled={!isFormFilled}
        sx={{
          width: 125,
          minWidth: 125,
          height: 36,
          minHeight: 36,
          bgcolor: isFormFilled
            ? theme.palette.primary.main
            : "#7B828D",
          color: "#ffffff",
          fontWeight: 700,
          fontSize: 12,
          "&:hover": {
            bgcolor: isFormFilled
              ? theme.palette.primary.dark
              : "#7B828D",
          },
          "&.Mui-disabled": {
            bgcolor: "#7B828D",
            color: "#ffffff",
            opacity: 1,
          },
        }}
      >
        Save
      </AppButton>
    </Box>
  );
}