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

/**
 * Component that displays the main crate with reminder rules.
 * It includes <Cart> and rules
 */
export function Crate({data, handleToggleOverlayRemove, handleDeleteItem, handleShowOverlayRemove, handleCardsUpdated, isMobile, isTouch, onDelete}) {
    return (
        <div className="crate">

            <CrateMode current={data.mode} onChange={null} />

            <div>
                Delete crate
                <button style={{width: "32px"}} onClick={() => onDelete(data.id)}>
                    <img src="/images/shop/icon-remove.svg" alt="remove" />
                </button>
            </div>

            <div className="crate-products">

                <Cart
                    data={data}
                    isMobile={isMobile}
                    isTouch={isTouch}
                    onToggleOverlayRemove={handleToggleOverlayRemove}
                    onClickRemoveItem={handleDeleteItem}
                    onClickItem={handleShowOverlayRemove}
                    onCardUpdate={handleCardsUpdated}>
                </Cart>

                {1||(rules && rules.length > 0) && (
                    <CrateWarnings/>
                )}
            </div>

        </div>
    );

}