import Add from "@mui/icons-material/Add";
import { Box, Button, type SxProps, type Theme } from "@mui/material";
import { getLocalizedString } from "@olenbetong/appframe-core";

type SubmitButtonsProps = {
	/**
	 * Whether the form is in edit mode. If true, delete button is visible and submit button's text changes.
	 */
	edit?: boolean;
	/**
	 * Set loading state for submit button
	 */
	loading?: boolean;
	/**
	 * Custom styles for Box wrapper around buttons
	 */
	sx?: SxProps<Theme>;
	onDelete?: () => void;
	onCancel?: () => void;
	onSubmit?: () => void;
};

export function SubmitButtons({ edit, loading, onDelete, onCancel, onSubmit, sx }: SubmitButtonsProps) {
	return (
		<Box sx={{ display: "flex", flexWrap: "wrap", gap: 2, justifyContent: "flex-end", ...sx }}>
			{edit && <Button onClick={onDelete}>{getLocalizedString("Delete")}</Button>}
			<Button onClick={onCancel}>{getLocalizedString("Cancel")}</Button>
			<Button
				loading={loading}
				loadingPosition="start"
				startIcon={<Add />}
				type="submit"
				variant="contained"
				onClick={onSubmit}
			>
				{edit ? getLocalizedString("Save changes") : getLocalizedString("Register damage")}
			</Button>
		</Box>
	);
}