import React, { useEffect, useState } from "react";
import { AddGuideForm, CardGroup, GuidesCard, Edit } from "../../components";
// import { AddGuideForm } from "../../components/Guides/AddGuideForm";
import { Button, Modal, ModalHeader, ModalBody } from "reactstrap";
import guidesData from "../../api/GuidesData";
import styles from "./Guides.module.scss";
// references https://misago.live/guides/ no authentication
// add admin functionality
export const Guides = () => {
  const [guides, setGuides] = useState([]);
  const [selectedGuide, setSelectedGuide] = useState({});
  const [isEditOpen, setIsEditOpen] = useState(false);
  const [isAddOpen, setIsAddOpen] = useState(false);

  useEffect(() => {
    setGuides(guidesData);
  }, []);

  const toggleEdit = (selectedGuide) => {
    setSelectedGuide({ ...selectedGuide });
    setIsEditOpen(!isEditOpen);
  };

  const toggleAddFormModal = () => {
    setIsAddOpen(!isAddOpen);
  };

  function deleteGuide(guideId) {
    const updatedGuides = guides.filter(({ id }) => id !== guideId);
    setGuides(updatedGuides);
  }

  function addGuide(guideData) {
    const updatedGuides = [...guides];
    guideData.id = updatedGuides.length;
    updatedGuides.push(guideData);
    console.log("Add ", updatedGuides, guideData, guides);
    setGuides(updatedGuides);
  }

  function updateGuide(guideData) {
    const index = guides.find((guide, i) => guide.id === guideData.id).id;
    const updatedGuides = [...guides];
    updatedGuides.splice(index, 1, guideData);
    console.log("Edit ", updatedGuides, guideData, guides, index);
    setGuides(updatedGuides);
  }

  const guideAddFormActions = {
    toggleAddFormModal,
    addGuide,
  };

  const guideEditFormActions = {
    toggleEdit,
    updateGuide,
  };

  const guideEditFormData = {
    selectedGuide,
  };

  const guidesCards = guides.map((guide) => {
    const { id } = guide;
    const data = { ...guide };
    const actions = {
      deleteGuide,
      toggleEdit,
      updateGuide,
    };
    return <GuidesCard data={data} actions={actions} key={id} />;
  });

  const toggleModal = isEditOpen
    ? toggleEdit
    : isAddOpen
    ? toggleAddFormModal
    : null;

  return (
    <div>
      <CardGroup />
      <Button onClick={toggleAddFormModal}>Add</Button>
      <div className={styles.cards}>{guidesCards}</div>
      <Modal isOpen={isEditOpen || isAddOpen} toggle={toggleModal}>
        <div className="m-header">
          <div className={styles.exit} onClick={toggleModal}>
            &times;
          </div>
          <ModalHeader toggle={toggleModal} className={styles.modalHeader}>
            {isEditOpen ? "Edit Guide Form" : isAddOpen ? "Add New Guide" : ""}
          </ModalHeader>
        </div>
        <ModalBody>
          {isEditOpen && (
            <Edit data={guideEditFormData} actions={guideEditFormActions} />
          )}
          {isAddOpen && <AddGuideForm actions={guideAddFormActions} />}
        </ModalBody>
      </Modal>
    </div>
  );
};
