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

/**
 * Component that displays the main crate with reminder rules.
 * It includes <Cart> and rules
 */
export function Crate({crate_index}) {
    const {
        onDeleteCrate,
        crate
    } = useShopStore(state => ({
        onDeleteCrate: state.delCrate,
        crate: state.crates[crate_index]
    }))

    return (
        <div className="crate">

            <div className="crate-bar d-inline-flex">
                <CrateMode crate_index={crate_index}/>

                <div className="delete-crate align-self-end align-content-end 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}/>

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

}