import React, { useState, useEffect } from 'react';
import Layout from "../../../components/layout";
import { GetServerSideProps } from 'next';
import { Location, UserRole } from "@prisma/client";
import axiosServer from '../../../src/axiosServer';
const common = require('../../../src/helpers/common');
// import * as common from '../../../src/helpers/common';
import SurveyForm from '../../../components/survey/SurveyForm';
import _ from 'lodash';

const SurveyPage = ({ serverSurveys }) => {
    const [selectedSurvey, setSelectedSurvey] = useState(null);

    return (
        <Layout>
            <div className="max-w-4xl mx-auto my-8 p-4 bg-white shadow-md rounded">
                <h1 className="text-2xl font-bold mb-4">Анкети</h1>

                <div className="flex flex-row justify-between">
                    <div className="w-1/2 pr-4">
                        <h2 className="text-xl font-semibold mb-4">Списък</h2>
                        <ul className="space-y-4">
                            {serverSurveys.map((survey) => (
                                <li key={survey.id} className="p-4 border rounded bg-gray-50 shadow-sm">
                                    <p className="font-medium">{survey.id}: {survey.content}</p>
                                    {/* <p className="text-gray-700">{survey.publicFrom} - {survey.publicUntil}</p> */}
                                    <p className="mt-2"> [{survey.answers}] </p>
                                    <div className="mt-2">
                                        {Object.entries(_.groupBy(survey.messages, message => message.answer || "Без отговор")).map(([key, items]) => (
                                            <div key={key} className="text-sm text-gray-700">
                                                {key}: {items.length}
                                            </div>
                                        ))}
                                    </div>
                                    <button
                                        className="btn mt-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
                                        onClick={() => setSelectedSurvey(survey)}
                                    >
                                        Зареди детайли
                                    </button>
                                </li>
                            ))}
                        </ul>
                        <button
                            className="btn mt-4 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
                            onClick={() => setSelectedSurvey(null)}
                        >
                            Нова анкета
                        </button>
                    </div>
                    <div className="w-1/2 pl-4">
                        <h2 className="text-xl font-semibold mb-4">Детайли</h2>
                        <SurveyForm existingItem={selectedSurvey} />
                    </div>
                    {/* <div className="w-1/2 pl-4">
                        <h2 className="text-xl font-semibold mb-4">Selected Survey</h2>
                        {selectedSurvey ? (
                            <div className="p-4 border rounded bg-gray-50 shadow-sm">
                                <h3 className="text-lg font-bold">{selectedSurvey.title}</h3>
                                <p className="text-gray-700 mt-2">{selectedSurvey.description}</p>
                            </div>
                        ) : (
                            <p className="text-gray-700">No survey selected.</p>
                        )}
                    </div> */}
                </div>
                <div className="mt-8">
                </div>
            </div>
        </Layout>
    );
};

export default SurveyPage;

export const getServerSideProps: GetServerSideProps = async (context) => {
    const prisma = common.getPrismaClient();
    let serverSurveys = await prisma.survey.findMany({
        where: {
        },
        include: {
            messages: true,
        },
    });
    serverSurveys = common.convertDatesToISOStrings(serverSurveys);

    context.res.setHeader("Cache-Control", "s-maxage=1, stale-while-revalidate");
    return {
        props: {
            serverSurveys: serverSurveys
        },
    };
};