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

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

/**
 * Component that provides a base layout (aside/main) for the page.
 */


export function Layout({aside, main}) {
    // #!render_count
    const renderCount = useRenderCount();

    const mobileSideMenuShouldOpen = useShopStore(state => state.sideMenuIsOpen);
    const onClickToggleMobileSideMenu = useShopStore(state => state.switchSideMenu);
    const showCardAddedFeedback = useShopStore(state => state.showCardAddedFeedback);
    const showNoDestination = useShopStore(state => state.showNoDestination);

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

    return (
        <div className="layout">

            <aside className={'aside ' + (mobileSideMenuShouldOpen ? 'menu-opened' : '')}>{aside}</aside>

            {mobileSideMenuShouldOpen ? (
                <section className="main" onClick={onClickToggleMobileSideMenu}>{main}</section>
            ) : (
                <section className="main">{main}</section>
            )}

            {showCardAddedFeedback ? (
                !showNoDestination ?
                    (<div className="feedback-add-success">
                        ✓ added
                    </div>)
                    : (<div className="feedback-add-failure">
                        No cards added: all crates are closed
                    </div>)
            ) : null}
        </div>
    );
}