import axios from "axios";
import delve from "dlv";
import SeoConfig from "../../components/seo-config/seo-config";
import Layout from "../../components/layout/layout";
import styles from "../sign-up/index.module.scss";

const getPageMetadata = async (path) => {
  try {
      return await axios.get(`${process.env.STRAPI_URL_API}/pages?filters[slug]=${path === '/' ? 'home' : path.slice(1, path.length)}&populate=deep`);
  } catch (e) {
    console.error(e);
    return Promise.resolve({})
  }
}

export const getServerSideProps = async (context) => {
  const path = context.resolvedUrl;
  const menuHeader = await axios.get(`${process.env.STRAPI_URL_API}/menus/1?nested&populate=deep`);
  const menuFooter = await axios.get(`${process.env.STRAPI_URL_API}/menus/2?nested&populate=deep`);
  const page = await getPageMetadata(path);
  return {
    props: {
      menuHeaders: delve(menuHeader, 'data.data.attributes.items.data', []),
      menuFooter: delve(menuFooter, 'data.data.attributes.items.data', []),
      page: delve(page, "data.data.0.attributes", {}),
      seo: delve(page, "data.data.0.attributes.seo", {})
    }
  }
}

export function LostPassword({menuHeaders, menuFooter, page, seo}) {
  return (
    <>
      <SeoConfig {...seo}/>
      <Layout menuHeader={menuHeaders} menuFooter={menuFooter}>
        <div className={styles['page-sign-up']}>
          <section className={styles['section']}>
            <div className="container px-6 py-4 md:py-12 h-full mx-auto">
              <div className="flex justify-center items-center flex-wrap h-full g-6 text-gray-800">
                <div className="md:w-8/12 lg:w-6/12">
                  <p>Form here</p>
                </div>
                <div className="md:w-8/12 lg:w-6/12 mb-12 md:mb-0 hidden md:block">
                  <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.png"
                       className="w-full" alt="Phone image"/>
                </div>
              </div>
            </div>
          </section>
        </div>
      </Layout>
    </>
  );
}

export default LostPassword;