import React, { useState, useEffect, useContext } from "react";
import Paper from '@mui/material/Paper';
import {
  useParams,
  useNavigate
} from "react-router-dom";

import './Group.css';
import { GlobalContext } from "./GlobalContext.js";
import { base } from "./Common.js";

function Group() {
  const { csrfToken, user, setUser } = useContext(GlobalContext);
  const groupId = useParams().group;
  const [ group, setGroup ] = useState(null);
  const [ error, setError ] = useState(null);
  const [ locations, setLocations ] = useState([]);

  useEffect(() => {
    if (!user) {
      return;
    }

    const effect = async () => {
      const res = await window.fetch(
        `${base}/api/v1/locations/`, {
        method: 'GET',
        cache: 'no-cache',
        credentials: 'same-origin',
        headers: {
          'Content-Type': 'application/json',
          'CSRF-Token': csrfToken
        }
      });
      const data = await res.json();
      if (res.status >= 400) {
        setError(data.message ? data.message : res.statusText);
        return;
      }
      if (!data) {
        return;
      }
      setLocations(data.map(location => {
        const fields = Object.getOwnPropertyNames(location)
        .map(field => <div key={field}>
          <div>{field}</div>
          <div>{location[field]}</div>
        </div>);
        return <div key={location.id}>{ fields }</div>;
      }));
    };
    effect();
  }, [user, setGroup, groupId, csrfToken]);


  useEffect(() => {
    if (!user || !groupId || !csrfToken) {
      return;
    }

    const effect = async () => {
      const res = await window.fetch(
        `${base}/api/v1/groups/${groupId}/events`, {
        method: 'POST',
        cache: 'no-cache',
        credentials: 'same-origin',
        headers: {
          'Content-Type': 'application/json',
          'CSRF-Token': csrfToken
        }
      });
      const data = await res.json();
      if (res.status >= 400) {
        setError(data.message ? data.message : res.statusText);
        return;
      }
      if (!data) {
        return;
      }
      setGroup(data);
    };
    effect();
  }, [user, setGroup, groupId, csrfToken]);

  return (
    <Paper className="Group">
      <GlobalContext.Provider value={{user, setUser}}>
        Group: {groupId}
        <div>Locations</div>
        { locations }
      </GlobalContext.Provider>
    </Paper>
  );
}

export default Group;