import React from 'react'
import {OrderSummary} from "./OrderSummary.jsx";
import {OrderForm} from "./OrderForm.jsx";
import {CrateList} from "./CrateList.jsx";
import {useShopStore} from "./shop_store";

/**
 * Component that renders all things for order.
 * It acts like-a layout, this component do nothing more.
 */
export function OrderPanel({title, description}) {
    const isMobile = useShopStore((state) => state.isMobile);
    const onClickToggleMobileSideMenu = useShopStore((state) => state.switchSideMenu);
    const onClickOpenImport = useShopStore((state) => state.openImport);

    return (<section className="panel">

        <h2>{title}</h2>

        <div className="control">
            {description}
        </div>

        <div>
            <button
                className="btn btn-sm btn-outline-primary m-0 mb-2"
                style={{'cursor': 'pointer'}}
                onClick={onClickOpenImport}>Import JSON
            </button>
        </div>

        {isMobile ? (
            <div className="mobileBtnDisplaySideMenu">
                <button onClick={onClickToggleMobileSideMenu}>
                    <img src="/images/shop/icon-add.svg" alt="add"/>
                </button>
            </div>
        ) : null}

        <CrateList/>

        <section className="summary">


            <OrderForm/>
        </section>

    </section>);
}