import React from "react";
import Box from "@mui/material/Box";
import { DataGrid } from "@mui/x-data-grid";
import useLocalStorage from "../../hooks/useLocalStorage";
import { Link } from "react-router-dom";

const columns = [
  {
    field: "name",
    headerName: "Name",
    width: 150,
  },
  {
    field: "next_run_at",
    headerName: "Next Run",
    width: 150,
  },
  {
    field: "edit_survey_link",
    headerName: "",
    renderCell: ({ row }) => <Link to={`${row?.path}`}>Edit</Link>,
    width: 150,
  },
  {
    field: "results_survey_link",
    headerName: "",
    renderCell: ({ row }) => <Link to={`${row?.path}/results`}>Results</Link>,
    width: 150,
  },
];

export default function SurveysList() {
  const [forms] = useLocalStorage(`forms`, {});

  const rows = Object.keys(forms).map((id, i) => ({
    id,
    name: `Survey ${i}`,
    next_run_at: "Mon 28 Aug 16:35:36 EDT 2023",
    path: `/surveys/${id}`,
  }));

  return (
    <Box sx={{ minHeight: "100%", width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        initialState={{
          pagination: {
            paginationModel: {
              pageSize: 25,
            },
          },
        }}
        pageSizeOptions={[25, 50, 100]}
        checkboxSelection
        disableRowSelectionOnClick
      />
    </Box>
  );
}