import Typography from "@mui/material/Typography";
import * as React from "react";
import {useEffect, useMemo} from "react";
import {useAlert} from "../../../hooks/useAlert";
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import {CocktailItemCalc} from "./CocktailItemCalc";
import {IngredientCalcCard} from "./IngredientCalcCard";
import {cocktailClient} from "../../../lib/clients/CocktailClient";

export function CalcPage() {
    const {createError} = useAlert();
    const [cocktails, setCocktails] = React.useState([]);
    const [load, setLoad] = React.useState(false);
    const [cocktailMap, setCocktailMap] = React.useState({});

    const changeHandler = (id, value) => {
        setCocktailMap((prev) => ({
            ...prev,
            [id]: value
        }));
    }

    useEffect(() => {
        cocktailClient.getCocktailsForCalcPage(load, setLoad, setCocktails, setCocktailMap, createError)
        // eslint-disable-next-line
    }, [load]);

    const ingredients = useMemo(() => {
            let map = {}
            if (!cocktails) {
                return [];
            }
            cocktails.forEach((c) => {
                const receipts = c.receipt;
                const countMeter = cocktailMap[c.id];

                if (!receipts) {
                    return
                }
                receipts.forEach((r) => {
                    const ingredient = r.ingredient;
                    const id = ingredient.id;
                    const ingredientCount = r.count;

                    const resultCount = ingredientCount * countMeter;

                    if (map[id]) {
                        map[id] = {
                            ...map[id],
                            count: map[id].count + resultCount
                        }
                    } else {
                        map[id] = {
                            ingredient: ingredient,
                            count: resultCount
                        }
                    }
                })
            })
            return Object.values(map);
        },
        [cocktails, cocktailMap])

    const deleteHandler = (id) => {
        const state = cocktails.filter((c) => c.id !== id);
        setCocktails(state);
    }

    console.log(cocktailMap)

    return (
        <Box padding={2}>
            <Typography variant="h4" align="center">Коктейли</Typography>
            <Stack mt={2}>
                {cocktails.map((item, i) => (
                    <CocktailItemCalc key={i} cocktail={item} deleteHandler={deleteHandler}
                                      changeHandler={changeHandler}/>
                ))}
            </Stack>

            <Typography variant="h4" mt={2} align="center">Ингредиенты</Typography>
            <Stack mt={2}>
                {ingredients.map((item, i) => (
                    <IngredientCalcCard key={i} count={item.count} ingredient={item.ingredient}/>
                ))}
            </Stack>
        </Box>
    )
}