import { useEffect, useState } from "react";
import api from "../utils/api";
import Grid from "@mui/material/Grid2";
import {
  TableRow,
  TableBody,
  TableCell,
  TableHead,
  Table,
} from "@mui/material";

const LeftSide = ({ reset, setReset }) => {
  // next prev and sort
  const [users, setUsers] = useState();
  const [params, setParams] = useState({ offset: 0, sortby: "f_name" });
  // reset button
  // const [reset, setReset] = useState(true);

  // date
  const [date, setDate] = useState({ from: "2021-01-01", to: "2028-01-01" });
  const [dateToSubmit, setDateToSubmit] = useState({
    from: "2021-01-01",
    to: "2028-01-01",
  });

  useEffect(() => {
    async function fetchData() {
      const resp = await api.get("/getall", {
        params,
      });
      setUsers(resp.data);
    }
    async function resetData() {
      await api.get("/reset");
    }
    if (!reset) {
      setReset(true);
      resetData();
    }

    fetchData();
  }, [reset, params, dateToSubmit]);

  const viewProjectHours = (user) => {
    async function fetchHours() {
      const resp = await api.get("/getuser", {
        params: { userid: user },
      });
      // const entriesArray = Object.entries(resp.data);
      const entriesArray = Object.entries(resp.data.Fields);
      alert(entriesArray);
    }
    fetchHours();
  };

  if (!users) return <></>;
  return (
    <Grid container spacing={2}>
      <Grid size={5}>
        <label htmlFor="date">From: </label>
        <input
          type="date"
          id="from"
          name="from"
          value={date.from}
          onChange={(event) => setDate({ ...date, from: event.target.value })}
        />
        <label htmlFor="date">To: </label>
        <input
          type="date"
          id="to"
          name="to"
          value={date.to}
          onChange={(event) => setDate({ ...date, to: event.target.value })}
        />
        <button onClick={() => setDateToSubmit(date)}>Submit Date</button>
      </Grid>
      <Grid size={3}>
        <span>Select a sort:</span>
        <select
          value={params.sortby}
          onChange={(event) =>
            setParams((prevParams) => {
              return { ...prevParams, sortby: event.target.value };
            })
          }
        >
          <option value="">--Select--</option>
          <option value="f_name">First name</option>
          <option value="l_name">Last Name</option>
          <option value="mail">Email</option>
          <option value="date">Date</option>
          <option value="time">Time</option>
        </select>
      </Grid>
      <Grid size={4}></Grid>
      <Grid size={4}></Grid>
      <Grid size={4}>
        <button
          onClick={() => {
            if (!params.offset) return;
            setParams((prevParams) => {
              return { ...prevParams, offset: prevParams.offset - 10 };
            });
          }}
        >
          Prev users
        </button>
        <button
          onClick={() =>
            setParams((prevParams) => {
              return { ...prevParams, offset: prevParams.offset + 10 };
            })
          }
        >
          Next users
        </button>
      </Grid>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>First Name</TableCell>
            <TableCell>Last Name</TableCell>
            <TableCell>Email</TableCell>
            <TableCell>Project name</TableCell>
            <TableCell>Date</TableCell>
            <TableCell>Hours</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {users.length > 0 && Array.isArray(users) ? (
            users.map((post, idx) => (
              <TableRow key={idx}>
                <TableCell>{post.f_name} </TableCell>
                <TableCell>{post.l_name} </TableCell>
                <TableCell>{post.mail} </TableCell>
                <TableCell>{post.name} </TableCell>
                <TableCell>{post.date.slice(0, 10)} </TableCell>
                <TableCell>{post.time} </TableCell>
                <TableCell>
                  <button onClick={() => viewProjectHours(post.user)}>
                    View Project Hours
                  </button>
                </TableCell>
              </TableRow>
            ))
          ) : (
            <div>No posts found...</div>
          )}
        </TableBody>
      </Table>
      <Grid size={5}></Grid>
      <Grid size={6}>
        <button onClick={() => setReset(!reset)}>RESET</button>
      </Grid>
    </Grid>
  );
};

export default LeftSide;
