{t("search:page-title")} - {t("common:service-name")}

import _ from "lodash";
import Head from "next/head";
import Header from "../components/header";
import Banner from "../components/banner";
import CookieBanner from "../components/cookieBanner";
import Breadcrumbs from "../components/breadcrumbs";
import SearchResults from "../components/searchresults";
import Footer from "../components/footer";
import Errorpage from "../components/errorpage";
import styles from "../styles/Home.module.css";
import { useSelector, shallowEqual, connect } from "react-redux";
import { wrapper } from "../store/store";
import Cookies from "cookies";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";

import { setSearch, getSearchObj } from "../store/search/action";
import { setSearchResults, getSearchResultsObj } from "../store/searchOutput/action";
import {getBasicSearch} from "../actions"

const Home = (props) => {
    const { footerLinks, pages } = props;
    let { t, lang } = useTranslation();

    const router = useRouter();
    const { locale } = router;

    return (
        <div>
            <Head>
                <title>
                    {t("search:page-title")} - {t("common:service-name")}
                </title>
            </Head>
            <div id="page_wrapper">
                <CookieBanner />
                <Header courseName={t("common:service-name")} />
                <div className="govuk-width-container">
                    <Banner />
                    <SearchResults searchString={props.search.searchString} searchResultsObj={props.searchResultsObj} />
                </div>
                <Footer footerLinks={footerLinks} />
            </div>
        </div>
    );
};

export  const getServerSideProps = wrapper.getServerSideProps (
     store => async({ query, req, res }) => 
        {
            console.log('query-',query); 
            const searchResultsObj = await getBasicSearch(query.q) || null;
             store.dispatch(setSearchResults(searchResultsObj));
             store.dispatch(setSearch(query.q));
        }
);

// export const getServerSideProps = wrapper.getServerSideProps(
//     async ({ locale, store, query, req, res }) => {
//         //     const token = await getToken();
//         //     let accessToken = token.access_token;

//         //     const apiRoot = process.browser ? window.API_ROOT : process.env.API_ROOT;

//         //     const [pages, footerLinks, courseListContent] = await Promise.all([
//         //       await getPages(accessToken, locale),
//         //       await getFooterLinks(accessToken, locale),
//         //       await getCourseList(accessToken, locale),
//         //     ]);
//         //     //const courseID = await getCourseID
//         //     store.dispatch(setApiRoot(apiRoot));
//         //     store.dispatch(setPages(pages));
//         //     store.dispatch(setFooterLinks(footerLinks));
//         //     store.dispatch(setCourseListContent(courseListContent));
//         console.log(query);
//         //store.dispatch(setSearch(query.search));
//     }
// );

const mapStateToProps = (state) => {
    console.log('mapstate',state);

    return {
        search: state.search,
        searchResultsObj: state.searchResultsObj
        //         //     apiroot: state.apiroot,
        //         //     courseListContent: state.courseListContent.courseListContent,
        //         //     pages: state.pages.pages,
        //         //     footerLinks: state.footerLinks.footerLinks,
        //         //     regions: state.regions,
        //         //     sectors: state.sectors,
        //         //     form: state.form,
    };
};

export default connect(mapStateToProps)(Home);