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

    // #!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 ? (
                    <div className="feedback-add-success">
                        ✓ added
                    </div>
                ) : null}
            </div>
        );
}