import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { Tabs, Tab } from "react-bootstrap";
import { Route } from "react-router-dom";

import FormContainer from "../containers/FormContainer";
import ListPeople from "../components/people/ListPeople";
import { DEFAULT_COUNTRY_CODE } from "../utils/constants";
import CoopService from "../services/CoopService";

const { REACT_APP_PROXY } = process.env;

const Edit = (props) => {
  const { id } = useParams();
  const [key, setKey] = useState("home");
  const [coop, setCoop] = useState(null);

  useEffect(() => {
    if (coop == null) {
      CoopService.getById(id, function (data) {
        //data.addresses.map((address) => {
        //  address.locality.state = address.locality.state.id;
        //});
        setCoop(data);
      });
    }
  }, [props]);

  if (coop == null) {
    return <></>;
  }

  return (
    <Route path="/edit/:id/:tab">
      {({ match, history }) => {
        const { tab } = match ? match.params : {};

        return (
          <>
            <h5>{coop.name}</h5>
            <Tabs
              activeKey={tab}
              onSelect={(nextTab) => history.push(`/edit/${id}/${nextTab}`)}
            >
              <Tab eventKey="home" title="Home">
                <FormContainer coop={coop} />
              </Tab>
              <Tab eventKey="people" title="People">
                <ListPeople coop={coop} />
              </Tab>
            </Tabs>
          </>
        );
      }}
    </Route>
  );
};

export default Edit;