import React from 'react';
import NewGangForm from "./NewGangForm";
import axios from "axios";
import {errorToast} from "../common/errorHelpers";
import YesNoModal from "../common/YesNoModal";
import {Button} from "react-materialize";
import M from "materialize-css";
import {withRouter} from 'react-router-dom';

const Gangs = (props) => {
  const gangs = props.gangs;
  const setGangs = props.gangsSetter;

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

  const gangsData = gangs.map((gang, index) => {
    return (
      <li key={index}>
        <div className="collapsible-header">
          <div className="flex-row opposite-sides-content">
            <div className="flex-col">
              <div>{ gang.name }</div>
              <div className="grey-text">{ `${gang.about || '[no about]'} • ${gang.chip_name} (${gang.chip_code})`}</div>
            </div>

            <Button flat className="push" icon="edit" onClick={() => props.history.push(`/gangs/${gang.id}`)} />

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

  return (
    <div className="container">
      <NewGangForm newGangsSetter={setGangs} />

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

export default withRouter(Gangs);