import { Button } from "@mui/material";
import { DataGrid } from "@mui/x-data-grid";
import { Link, useParams } from "react-router-dom";
import useLocalStorage from "../../hooks/useLocalStorage";
import useForm from "../../hooks/useForm";

export default function SurveyResults() {
  const { surveyId } = useParams();
  const [runs, setRuns] = useLocalStorage(`runs-${surveyId}`, []);
  const [form] = useForm(surveyId);

  const columns = form?.fields?.map(({ id, name }) => ({
    field: id,
    headerName: name,
  }));

  return (
    <>
      <h3>SurveyRuns</h3>
      {surveyId}
      <Button onClick={() => setRuns([{ id: crypto.randomUUID() }, ...runs])}>
        New Run
      </Button>

      {runs &&
        runs.map((r) => {
          const runRs = runResults(surveyId, r.id);

          console.log(runRs);

          return (
            <div key={r.id}>
              <Link to={`${r.id}/answer`}>Add Answer</Link> {JSON.stringify(r)}
              Total Results: {Object.keys(runRs).length}
              <DataGrid
                rows={[]}
                columns={columns}
                initialState={{
                  pagination: {
                    paginationModel: {
                      pageSize: 25,
                    },
                  },
                }}
                pageSizeOptions={[25, 50, 100]}
                checkboxSelection
                disableRowSelectionOnClick
              />
            </div>
          );
        })}
    </>
  );
}

function runResults(surveyId, runId) {
  const str = localStorage[`results-${surveyId}-${runId}`];
  return !str ? {} : JSON.parse(str);
}