import { Button } from "antd";
import React, { useEffect, useState } from "react";
import { UserAddOutlined, LeftOutlined } from "@ant-design/icons";
import axios from "axios";
import AddNomineeForm from "./AddNomineeForm";
import baseUrl from "../../../../array/base/config";
import NomineeCard from "./NomineeCard";
import ViewDocument from "../ShareholderVerification/ViewDocument";
/**
 * A component to manage and display nominee details.
 * @returns {JSX.Element} The rendered component.
 */
const NomineeDetails = () => {
  const [showCurrent, setShowCurrent] = useState("ListView");
  const [nominee, setNominee] = useState([]);
  // const [nomineeToEdit, setNomineeToEdit] = useState({});
  const [documentToView, setDocumentToView] = useState({});

  useEffect(() => {
    apicall();
  }, []);

  const getComponent = () => {
    switch (showCurrent) {
      case "Add Nominee":
        return <AddNomineeForm apicall={apicall} setShowCurrent={setShowCurrent}/>;
      case "View Document":
        return <ViewDocument documentToView={documentToView} />;
    }
  };

  const apicall = async () => {
    try {
      const detail = localStorage.getItem("token");
      const response = await axios({
        method: "get",
        url: `${baseUrl}/api/shareholdernominee/`,
        headers: {
          Authorization: `Token ${detail}`,
        },
      });
      setNominee(response.data.data.results);
      console.log(response.data.data.results);
    } catch (err) {
      console.log("the error ", err);
    }
  };
  return (
    <div style={{ paddingBottom: "100px" }}>
      <div className="d-md-flex justify-between">
        <h2 className="main-title">
          Nominee <span>Details</span>{" "}
        </h2>
        <div>
          {showCurrent == "ListView" && nominee.length == 0 ? (
            <Button
              icon={<UserAddOutlined />}
              onClick={() => setShowCurrent("Add Nominee")}
              style={{ marginTop: "15px", marginBottom: "15px" , display:'flex', alignItems:'center'}}
            >
              Add Nominee
            </Button>
          ) : showCurrent !== "ListView" ? (
            <Button
              icon={<LeftOutlined />}
              onClick={() => setShowCurrent("ListView")}
              style={{ marginTop: "15px", marginBottom: "15px" }}
            >
              Back
            </Button>
          ) : null}
        </div>
      </div>
      {getComponent()}
      {showCurrent == "ListView" &&
        nominee.map((dat) => (
          <NomineeCard
            style={{ margin: "10px" }}
            dat={dat}
            setShowCurrent={setShowCurrent}
            setDocumentToView={setDocumentToView}
          />
        ))}
    </div>
  );
};

export default NomineeDetails;