import axios from "axios";
import React from "react";
import baseUrl from "../../../../array/base/config";
import { Button, Card, Space } from "antd";
import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
import { toast } from "react-toastify";
/**
 * A component to display and manage shareholder verification documents.
 * @param {Object} props - The component's props.
 * @param {Object} props.dat - The document data.
 * @param {Function} props.setShowCurrent - A function to set the current view.
 * @param {Function} props.setDocumentToEdit - A function to set the document to edit.
 * @param {Function} props.setDocumentToView - A function to set the document to view.
 * @returns {JSX.Element} The rendered component.
 */
const DocumentCard = ({ dat, setShowCurrent, setDocumentToEdit, setDocumentToView }) => {
  const handleEditClick = () => {
    setShowCurrent("Edit");
    setDocumentToEdit(dat);
  };
  const handleDocumentClick = () => {
    setDocumentToView(dat);
    setShowCurrent("View Document");
  };
  const handleDeleteClick = () => {
    const detail = localStorage.getItem("token");
    axios
      .delete(`${baseUrl}/api/shareholderdocument/${dat.id}/`, {
        headers: {
          Authorization: `Token ${detail}`,
        },
      })
      .then((response) => {
        toast.success("Verification document deleted successfully!", {
          position: "top-right",
          autoClose: 5001,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "light",
        });
        setShowEditForm((prev) => !prev);
      })
      .catch((error) => {
        console.error("Document deletion error", error);
        toast.error(
          "Verification document could not be deleted. Please try again.",
          {
            position: "top-right",
            autoClose: 5001,
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: true,
            draggable: true,
            progress: undefined,
            theme: "light",
          }
        );
        // handle error
      });
  };

  const getFormattedText = (type) => {
    switch (type) {
      case "CITIZENSHIP_CERTIFICATE":
        return "Citizenship Certificate";
      case "PASSPORT":
        return "Passport";
      case "DRIVING_LICENSE":
        return "Driving License";
      case "VOTER_ID":
        return "Voter ID";
      case "NATIONAL_ID":
        return "National ID";
      case "OTHER":
        return "Other";
    }
  };
  return (
    <Space direction="vertical" size={16} style={{ margin: "10px" }}>
      <Card>
        <div className="d-flex justify-end mb-3">
          {!(dat?.document_type == "CITIZENSHIP_CERTIFICATE") && (
            <>
              <Button
                icon={<EditOutlined />}
                onClick={handleEditClick}
                className="me-2"
              >
                Edit
              </Button>
              <Button icon={<DeleteOutlined />} onClick={handleDeleteClick}>
                Delete
              </Button>
            </>
          )}
        </div>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between", // Align items to the left and right
            alignItems: "center", // Align items to the center
            width: 800,
            className:"member_card"
          }}
        >
            
            <div style={{flex: 1}}>
            <p className="mb-2">
              <b>Type : </b>
              {getFormattedText(dat?.document_type)}
            </p>
          
          
            <p className="mb-2">
              <b>Document Number : </b>
              {dat?.document_number}
            </p>
          
          
            <p className="mb-2">
              <b>Document Issue Date(B.S) : </b>
              {dat?.document_issue_date_bs}
            </p>
          
          
            <p className="mb-2">
              <b>Document Expiry Date(B.S) : </b>
              {dat?.document_expiry_date_bs}
            </p>

            <p className="mb-2">
              <b>Document Expiry Date : </b>
              {dat?.document_expiry_date}
            </p>
          
          
            <p className="mb-2">
              <b>Document Issue Place : </b>
              {dat?.document_issue_place}
            </p>
            </div>
          
          
        
          {dat?.document_file && <div className="thumbnail" onClick={handleDocumentClick}>
            {dat?.document_file?.split(".").pop() === "pdf" ? (
              <img src="/pdf_logo.jpg" alt="PDF icon" />
            ) : (
              <img
                style={{ objectFit: "contain" }}
                src={dat?.document_file}
                alt="Document Image"
              />
            )}
          </div>}
        </div>
      </Card>
    </Space>
  );
};

export default DocumentCard;