//next.js page to show all locatons in the database with a link to the location page
import CartEventForm from "../../../components/cartevent/CartEventForm";
import Layout from "../../../components/layout";
import axiosServer from '../../../src/axiosServer';
import { ICartEventPageProps } from "./index";


export default function NewPage(props: ICartEventPageProps) {
    return (
        <Layout>
            <div className="h-5/6 grid place-items-center">
                <CartEventForm props={props} />
            </div>
        </Layout>
    );
}

//------------------pages\cart\availabilities\edit\[id].tsx------------------

export const getServerSideProps = async (context) => {
    context.res.setHeader("Cache-Control", "s-maxage=1, stale-while-revalidate");

    const axios = await axiosServer(context);
    const locations = await axios
        .get(`${process.env.PUBLIC_URL}/api/data/locations?select=id,name`)
        .then((res) => {
            console.log("locations: " + JSON.stringify(res.data));
            return res.data;
        });


    if (!context.query || !context.query.id) {
        return {
            props: {}
        };
    }

    const { id } = context.query.id;
    const { data: item } = await axiosInstance.get(
        process.env.PUBLIC_URL + "/api/data/cartevents/" + context.params.id
    );

    return {
        props: {
            item: item,
            locations: locations
        },
    };
};