import React from 'react';
import {Cart} from "./Cart";
import {CrateMode} from "./CrateMode";
import {CrateWarnings} from "./CrateWarnings";
import {useShopStore} from "./shop_store";
import {CrateOptions} from "./CrateOptions";
import {CartHorizontal} from "./CartHorizontal";

// #!render_count
import {useRenderCount} from "@uidotdev/usehooks";


/**
 * Component that displays the main crate with reminder rules.
 * It includes <Cart> and rules
 */
export function Crate({crate_index}) {
    // #!render_count
    const renderCount = useRenderCount();

    const crate = useShopStore((state) => state.crates[crate_index],
        (a, b) => a.length === b.length && a.id === b.id);
    const modes_order = useShopStore((state) => state.modes_order);
    const onDeleteCrate = useShopStore((state) => state.delCrate);

    // #!render_count
    console.log("Crate renders: ", renderCount)

    return (
        <div className="crate">
            {
                modes_order.includes(crate.crate_mode) && (
                    <div className="crate-bar d-inline-flex justify-content-between">
                        <CrateMode crate_index={crate_index}/>

                        <div className="delete-crate align-self-start align-content-start justify-content-end" onClick={() => onDeleteCrate(crate.id)}>
                            Delete crate <img src="/images/shop/icon-remove.svg" alt="remove"/>
                        </div>
                    </div>
                )
            }

            <div className="crate-products">

                <Cart crate_index={crate_index}/>

                { !modes_order.includes(crate.crate_mode) &&
                    <CartHorizontal crate_index={crate_index}/>
                }

                <CrateWarnings crate_index={crate_index} />

                <CrateOptions crate_index={crate_index}/>
            </div>
        </div>
    );

}