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

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

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

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

    return (<section className="panel">

        <h2>{title}</h2>

        <div className="control justify-content-between">
            {description}

            <div className="legend">
                {legend}
            </div>

        </div>

        <div>
            <ImportJSON/>
        </div>

        <RFQFeedback/>

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

        <CrateList/>

        <section className="summary">
            <OrderSummary/>

            <OrderForm/>
        </section>

    </section>);
}