import {Box, Card, CardContent, Chip, Grid, IconButton, LinearProgress, Tooltip, Typography} from "@mui/material";
import EmailIcon from '@mui/icons-material/Email';
import LocalPhoneIcon from '@mui/icons-material/LocalPhone';
import ReceiptIcon from '@mui/icons-material/Receipt';
import DoneAllIcon from '@mui/icons-material/DoneAll';
import Divider from '@mui/material/Divider';
import {useState} from "react";
import {useUpdateReportTodo} from "../../hooks/useReportTodo.jsx";

const icons = {
	SENT_EMAIL: <EmailIcon />,
	MAKE_PHONE_CALL: <LocalPhoneIcon />,
	INVOICE_SEND: <ReceiptIcon />,
	COMPLETE: <DoneAllIcon />
};
const MyButton = function (prop) {
	const { name, isActive, clickTodos } = prop;
	return (
		<IconButton
			onClick={()=>clickTodos(name)}
			color={isActive(name) ? "success" : "default"}
		>
			{icons[name]}
		</IconButton>
	);
}
function LinearProgressWithLabel(props) {
	return (
		<Box sx={{ display: 'flex', alignItems: 'center' }}>
			<Box sx={{ width: '100%', mr: 1 }}>
				<LinearProgress
					variant="determinate"
					aria-label="Upload photos"
					{...props}
				/>
			</Box>
			<Box sx={{ minWidth: 35 }}>
				<Typography
					variant="body2"
					sx={{ color: 'text.secondary' }}
				>{`${Math.round(props.value)}%`}</Typography>
			</Box>
		</Box>
	);
}
function Item(prop) {
	const { row, rowid } = prop;
	const [active,setActive] = useState();
	const updateTodo = useUpdateReportTodo(6, rowid);

	const isActive = (item)  => {
		if (typeof active === "undefined" && row.reportsTodos.length > 0) {
			for (let repoElement of row.reportsTodos) {
				if (repoElement['nameString'] === item){
					if (!repoElement.deleted) {
						setActive((prev) => ({
							...prev,
							[item]: true
						}))
					}
					return !repoElement.deleted;
				}
			}
		}
		return typeof active !== "undefined" && typeof active[item] !== "undefined" && active[item];
	}
	const takeTodoRow = (item) => {
		let ret = null;
		if (row.reportsTodos.length > 0) {
			for (let repoElement of row.reportsTodos) {
				if (repoElement['nameString'] === item){
					ret = repoElement;
					break;
				}
			}
		}
		return ret;
	}
	const clickTodos = async (item) => {
		const val = !isActive(item) ? item : !item;
		const todoObj = takeTodoRow(item);
		const todoId = (todoObj === null) ? 0 : todoObj.id;
		await updateTodo.mutateAsync({
			reportId: row.id,
			todoName: item,
			todoId: todoId
		});
		setActive((prev) => ({
			...prev,
			[item]: val,
		}));
	};
	const countProgress = () => {
		let count = 0;
		Object.entries(icons).map(([name]) => {
			if (isActive(name)){
				count++;
			}
		})

		return count / 4 * 100;
	}

	return (
		<Card variant="outlined" sx={{position:"relative"}}>
			<Tooltip title="Numer sprawozdania">
				<Chip label={row.number} color="primary" sx={{
					position: "absolute",
					right:0
				}}/>
			</Tooltip>
			<CardContent>
				<Typography variant="h6" component="div">
					{row.client.strName}
				</Typography>
				<Divider/>

				<Grid container spacing={1}>
					{Object.entries(icons).map(([name]) => (
						<Grid size="3" key={name}>
							<MyButton name={name} isActive={isActive} clickTodos={clickTodos}/>
						</Grid>
					))}
				</Grid>

				<Divider />
				<LinearProgressWithLabel value={countProgress()} />
			</CardContent>
		</Card>
	);
}

export default Item;