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,
                          onModeChange
                      }) {
    return (
        <div className="crate">

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

            <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>
    );

}