import './infoPage.scss';
import ArrActive from '/svg/arrow_active.svg';
import InfoCard from "../../cmp/infoCard/InfoCard.jsx";


const InfoPage = D.declare('view.page.InfoPage', () => {
    return <div class="info-page">
        <div class="info-page__wrapper">
            <button class="info-page__link-back" type="button" aria-label="Вернуться на предыдущую страницу">
                <ArrActive width="22" height="18"/>
            </button>
            <div class="info-page__card">
                {( update ) => {
                    let un;
                    tmpStore.valEqualOnly( 'beforeNavigation.to', 'InfoPage' )(() => {
                        update(<div>LOADER</div>)

                        un && un();
                        un = store.sub(['navigation.data.category', 'navigation.data.id'], async function(categoryID, cardID) {

                            const category = await Model.categories.load(categoryID);
                            const card = await Model.cards.load(categoryID, cardID);
                            update(<InfoCard category={category} item={card}/>)
                            /*
                            if(card.type === 1){
                                /!*update(<StdCard item={card} category={cat}/>)
                            }else{*!/

                            }
*/

                        });

                        console.log( 'data', store.get( 'navigation.data' ) )
                    } );
                }}

            </div>
        </div>
    </div>
});
InfoPage.route = new Route('/category/:category/id/:id');

export default InfoPage;
export {InfoPage};
