import Add from "@mui/icons-material/Add";
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Grid, useMediaQuery } from "@mui/material";
import { getLocalizedString } from "@olenbetong/appframe-core";
import { theme } from "@olenbetong/appframe-mui";
import type { DamagesRecord } from "../../data";
import { ElementDamagesHeader, ElementDamagesItem } from "./DesktopView";
import { DuplicatePhoneViewItem } from "./PhoneView";

type DuplicateElementDamageDialogProps = {
	open: boolean;
	onClose: () => void;
	record: DamagesRecord[];
	onRegisterAnyway: () => void;
	loading: boolean;
	linkToDamage: boolean;
};

export function DuplicateElementDamageDialog({
	open,
	onClose,
	record,
	onRegisterAnyway,
	loading,
	linkToDamage,
}: DuplicateElementDamageDialogProps) {
	let matches = useMediaQuery(theme.breakpoints.up("lg"));
	let backgroundColor = "#e9ebee";

	return (
		<Dialog open={open} onClose={onClose} fullWidth fullScreen={!matches}>
			<DialogTitle sx={{ backgroundColor: backgroundColor }}>
				{getLocalizedString("This element has one or more unfixed registered damage")}
			</DialogTitle>
			<DialogContent sx={{ backgroundColor: backgroundColor }}>
				<Grid container>
					{matches ? (
						<>
							<ElementDamagesHeader />
							{record.map((record) => (
								<ElementDamagesItem key={record.PrimKey} record={record} linkToDamage={linkToDamage} />
							))}
						</>
					) : (
						<div className="flow" style={{ width: "100%" }}>
							{record.map((record) => (
								<DuplicatePhoneViewItem key={record.PrimKey} record={record} linkToDamage={linkToDamage} />
							))}
						</div>
					)}
				</Grid>
			</DialogContent>
			<DialogActions sx={{ backgroundColor: backgroundColor }}>
				<Button onClick={onClose}>{getLocalizedString("Cancel")}</Button>
				<Button
					startIcon={<Add />}
					variant="contained"
					type="submit"
					onClick={onRegisterAnyway}
					loading={loading}
					loadingPosition="start"
				>
					{getLocalizedString("Register damage anyway")}
				</Button>
			</DialogActions>
		</Dialog>
	);
}