import axios from 'axios';
import delve from 'dlv';

import SeoConfig from "../../../components/seo-config/seo-config";
import Layout from "../../../components/layout/layout";
import ShopSearch from "../../../components/shop-search/shop-search";
import Categories from "../../../components/categories/categories";
import BlogPagination from "../../../components/blog-pagination/blog-pagination";
import {environment} from "../../../environments/environment";

import styles from './index.module.scss';

/* eslint-disable-next-line */
export interface ResultProps {
}

export async function getServerSideProps(context) {
  const {query} = context;

  let postsUrl = `${environment.strapiApiUrl}/articles?populate=deep&sort=publishedAt:DESC`;
  if (query && query.page) {
    postsUrl += `$pagination[page]=${query.page}`;
  }

  const categories = await axios.get(`${environment.strapiApiUrl}/categories?populate=deep`);
  const posts = await axios.get(postsUrl);
  return {
    props: {
      categories: delve(categories, 'data.data', []),
      lastPublished: delve(posts, 'data.data', []),
      paginator: delve(posts, 'data.meta', {pagination: {}}),
    }
  }
}

export function Result({menuHeader, menuFooter, seo, categories, lastPublished, paginator}) {
  return (
    <>
      <SeoConfig {...seo} />
      <Layout menuHeader={menuHeader}
              menuFooter={menuFooter}
              headerTransparent={true}>
        <main className={styles['blog-container'] + " w-full my-4 px-2 lg:px-0"}>
          <section className="container max-w-screen-xl mx-auto relative flex flex-col md:flex-row">
            <aside className="grow md:basis-2/6 md:mx-0 md:pr-5">
              <ShopSearch />
              <Categories items={categories} />
            </aside>

            <section className="grow md:basis-4/6 mx-2">
              <footer className="mt-10">
                <p>Result page !</p>
                <BlogPagination paginator={paginator} />
              </footer>
            </section>
          </section>
        </main>
      </Layout>
    </>
  );
}

export default Result;