import { Button } from "antd";
import React, { useEffect, useState } from "react";
import AddFamilyForm from "./AddFamilyForm";
import axios from "axios";
import { UserAddOutlined, LeftOutlined } from "@ant-design/icons";
import baseUrl from "../../../array/base/config";
import FamilyMemberCard from "./FamilyMemberCard";
import EditFamilyMember from "./EditFamilyMember";
import MemberVerificationDocument from "./MemberVerificationDocument";
import ViewDocument from "./ShareholderVerification/ViewDocument";
/**
 * FamilyDetails component for managing and displaying family member information.
 * @returns {JSX.Element} - React component.
 */
const FamilyDetails = () => {
  
  const [showCurrent, setShowCurrent] = useState("Family List");
  const [family, setFamily] = useState([]);
  const [memberToEdit, setMemberToEdit] = useState({});
  const [documentToView, setDocumentToView] = useState({});
  useEffect(() => {
    apicall();
  }, []);

  const apicall = async () => {
    try {
      const detail = localStorage.getItem("token");

      const response = await axios({
        method: "get",
        url: `${baseUrl}/api/shareholderfamily/`,
        headers: {
          Authorization: `Token ${detail}`,
        },
      });
      setFamily(response.data.data.results);
      console.log(response.data.data.results);
    } catch (err) {
      console.log("the error ", err);
    }
  };

  const getComponent = () => {
    switch (showCurrent) {
      case "Add Family":
        return <AddFamilyForm setShowCurrent={setShowCurrent} apicall={apicall} />;
      case "Edit":
        return <EditFamilyMember member={memberToEdit} setShowCurrent={setShowCurrent} />;
      case "View Document":
        return <ViewDocument documentToView={documentToView} />;
    }
  };


  return (
    <div style={{ paddingBottom: "100px", width:"850px" }}>
       <div className="d-md-flex justify-between">
           <h2 className="main-title">Family <span>Members</span> </h2>
           <div>
          {showCurrent == 'Family List'?(<Button
            icon={<UserAddOutlined />}
            onClick={() => setShowCurrent("Add Family")}
            style={{ marginTop: "15px", marginBottom: "15px" }}
            className="d-flex align-items-center"
          >
            Add family
          </Button>):(<Button
            icon={<LeftOutlined/>}
            onClick={() => setShowCurrent("Family List")}
            style={{ marginTop: "15px", marginBottom: "15px" }}
          >
          Back
          </Button>) }
        </div>
       </div>
      {getComponent()}
      {showCurrent == "Family List" &&
       family.map((dat) => (
        <FamilyMemberCard
          style={{ marginTop: "20px" }}
          dat={dat}
          setMemberToEdit={setMemberToEdit}
          setShowCurrent={setShowCurrent}
          setDocumentToView={setDocumentToView}
        />
      )
        )}
    </div>
  );
};

export default FamilyDetails;