import { Card, Space, Image, Button } from "antd";
import { EditOutlined, DeleteOutlined } from "@ant-design/icons";

import axios from "axios";
import baseUrl from "../../../array/base/config";
import { toast } from "react-toastify";
/**
 * FamilyMemberCard component for displaying family member information.
 * @param {Object} props - The component's props.
 * @param {Object} props.dat - The family member's data.
 * @param {Function} props.setMemberToEdit - Function to set the family member to edit.
 * @param {Function} props.setDocumentToView - Function to set the document to view.
 * @param {Function} props.setShowCurrent - Function to set the current view.
 * @returns {JSX.Element} - React component.
 */
const FamilyMemberCard = ({
  dat, setMemberToEdit, setDocumentToView, setShowCurrent
}) => {
  const handleEditClick = () => {
    setShowCurrent("Edit");
    setMemberToEdit(dat);
  };
  const handleDocumentClick = () => {
    setDocumentToView(dat);
    setShowCurrent("View Document");
  };
  const handleDeleteClick = () => {
    const detail = localStorage.getItem("token");
    axios
      .delete(`${baseUrl}/api/shareholderfamily/${dat.id}/`, {
        headers: {
          Authorization: `Token ${detail}`,
        },
      })
      .then((response) => {
        toast.success("Family member 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("Edit form error", error);
        toast.error("Family member 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
      });
  };

  return (
    <Space direction="vertical" size={16} style={{ margin: "10px" }}>
      <Card>
           <div className="d-flex justify-end mb-3 align-items-center">
                {!(dat?.relationship =='Father' || dat?.relationship =='Mother') && 
                  <><Button icon={<EditOutlined />} onClick={handleEditClick} className="me-2" style={{ marginRight: '10px', display:'flex', alignItems:'center' }}>
                    Edit
                  </Button>
                  <Button icon={<DeleteOutlined />} onClick={handleDeleteClick} style={{  display:'flex', alignItems:'center' }}>
                    Delete
                  </Button></>}
           </div>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between", // Align items to the left and right
            alignItems: "flex-start", // Align items to the top
            width: 800,
          }}
        >
          <div style={{ flex: 1 }} >
            <div className="family_row1">
            <h3>
              Name:  </h3>
               <p> {dat?.first_name} {dat?.last_name}</p>
           
            {/* {dat?.middle_name && dat?.dat.middle_name} */}
            </div>
            <div className="family_row1">
                <h3>
                  Relationship: </h3>
                 <p> {dat?.relationship}</p>
                
            </div>
            <div className="family_row1">
                  {dat?.phone_number && (
                    <h3>
                      <b>Phone: </b>
                      {dat?.phone_number}
                    </h3>
                  )}
            </div>
            <div className="family_row1">
                  {dat?.district?.name && (
                    <p>
                      <h3>District: </h3>
                      {dat?.district?.name}
                    </p>
                  )}
            </div>
          </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="Family Member Image"
              />
            )}
          </div>}
        </div>
      </Card>
    </Space>
  );
};
export default FamilyMemberCard;