import React from "react";
import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles";

import HeaderMercy from "components/Header/HeaderMercy.js";
import Header from "components/Header/Header.js";

import HeaderLinks from "components/Header/HeaderLinks.js";
import Footer from "components/Footer/FooterSosmed.js";
import Parallax from "components/Parallax/Parallax.js";
import styles from "assets/jss/nextjs-material-kit/pages/components.js";

import GetSales from "api/sales/sales-mercy.js";
import DataSnackbarContent from "pages-sections/yamaha/snackbar.js";
import DataSales from "pages-sections/sales/sales.js";
import Cookies from "cookies";
import stylecss from "pages/home.css";

const dashboardRoutes = [];
const useStyles = makeStyles(styles);

const Sales = function ({ backend, sales, ...props }) {
  const classes = useStyles();
  const { ...rest } = props;
  return (
    <div>
      <Header color="white" routes={dashboardRoutes} leftLinks={<HeaderMercy />} fixed />
      <Parallax image={require("assets/img/merci.png")} width="200px" />
      <div className={classNames(classes.main, classes.mainRaised)}>
        <DataSales sales={sales} backend={backend} />
      </div>
      <br /><br />
      <Footer />
    </div>
  );
}

export default Sales;

export async function getServerSideProps(context) {
  var sales = [];
  const backend = process.env.BACKEND_SERVER_URI;

  var res = await GetSales.GetSalesMerci();
  if (res["STATUS"] === 1) {
    sales = res["DATA"]["salesMercies"];
  }

  console.log(sales);

  return {
    props: { sales, backend }, // will be passed to the page component as props
  };
}