import React, { useState, useEffect } from 'react';
import { withRouter } from 'react-router-dom';
import axios from 'axios';
import { errorToast } from "../common/errorHelpers";
import NewHomieForm from './NewHomieForm';
import { Button, Icon } from 'react-materialize';
import M from 'materialize-css';
import YesNoModal from "../common/YesNoModal";
import RoutableNavItem from "../common/RoutableNavItem";

const Homies = (props) => {
  const [homies, setHomies] = useState([]);

  const gang = props.gang;

  useEffect(() => {
    (async() => {
      try {
        const response = await axios.get(`/api/gangs/${gang.id}/homies`);
        if (response.status === 200 && response.data){
          setHomies(response.data);
        }else{
          errorToast();
        }
      } catch (e) {
        errorToast();
      }
    })();
  }, [gang]);

  const deleteHomie = async (id) => {
    try {
      const response = await axios.delete(`/api/gangs/${gang.id}/homies/${id}`);
      if (response.status === 200 && response.data){
        setHomies(response.data);
        M.toast({ html: "See y'a on the other side Homie" });
      }else{
        errorToast();
      }
    }catch (e) {
      console.log(e);
      errorToast();
    }
  }

  const homiesData = homies.map((homie, index) => {
    return (
      <li key={index}>
        <div className="collapsible-header">
          <div className="flex-row opposite-sides-content">
            <div className="flex-col">
              <a href={`/homie/${homie.id}/flow`}>{ homie.name }</a>
              <div className="grey-text">{ homie.about }</div>
            </div>

            <RoutableNavItem additionalClasses="push" href={`/homie/${homie.id}/move-money`}>
              <Button>
               +
              <Icon left>monetization_on</Icon>
              </Button>
            </RoutableNavItem>

            <RoutableNavItem href={`/homie/${homie.id}/put-in-work`}>
              <Button className="bump">
                 +
                <Icon left>query_builder</Icon>
              </Button>
            </RoutableNavItem>

            <YesNoModal
              body={"Maan, y'a sure about this?"}
              yesAction={() => deleteHomie(homie.id)}
              triggerNode={<Button flat node="button" icon="delete" />} />
          </div>
        </div>
      </li>
    )
  });

  return (
    <div className="container">
      <NewHomieForm newHomiesSetter={setHomies} gang={props.gang} />

      <ul className="collapsible">
        { homiesData }
      </ul>
    </div>
  )
}

export default withRouter(Homies);