import { Button } from "antd";
import React, { useEffect, useState } from "react";
import axios from "axios";
import { UserAddOutlined, LeftOutlined} from "@ant-design/icons";
import baseUrl from "../../../../array/base/config";
import DocumentForm from "../../Sharetransferrequests/DocumentForm";
import EditVerificationDocument from "./EditVerificationDocument";
import ViewDocument from "./ViewDocument";
import DocumentCard from "./DocumentCard";
/**
 * A component for managing shareholder verification documents.
 * @returns {JSX.Element} The rendered component.
 */const VerificationDocument = () => {
  const [showCurrent, setShowCurrent] = useState("List Documents");
  const [documentList, setDocumentList] = useState([]);
  const [documentToEdit, setDocumentToEdit] = 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/shareholderdocument/`,
        headers: {
          Authorization: `Token ${detail}`,
        },
      });
      setDocumentList(response.data.data.results);
      console.log(response.data.data.results);
    } catch (err) {
      console.log("the error ", err);
    }
  };

  const getComponent = () => {
    switch (showCurrent) {
      case "Add Document":
        return <DocumentForm />;
      case "Edit":
        return <EditVerificationDocument dat={documentToEdit} />;
      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">
          Verification <span>Documents</span>{" "}
        </h2>
        <div>
          {showCurrent == 'List Documents'?(<Button
            icon={<UserAddOutlined />}
            onClick={() => setShowCurrent("Add Document")}
            style={{ marginTop: "15px", marginBottom: "15px" }}
            className="d-flex align-items-center"
          >
            Add verification document
          </Button>):(<Button
            icon={<LeftOutlined  />}
            onClick={() => setShowCurrent("List Documents")}
            style={{ marginTop: "15px", marginBottom: "15px" }}
          >
            Back
          </Button>) }
        </div>
      </div>
      {getComponent()}
      {showCurrent == "List Documents" &&
        documentList.map((dat) => (
          <DocumentCard
            style={{ marginTop: "20px" }}
            dat={dat}
            setDocumentToEdit={setDocumentToEdit}
            setDocumentToView={setDocumentToView}
            setShowCurrent={setShowCurrent}
          />
        ))}
    </div>
  );
};

export default VerificationDocument;