import { Button, Card, Space } from "antd";
import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
import axios from "axios";
import baseUrl from "../../../../array/base/config";
import { toast } from "react-toastify";
/**
 * AddressCard component for displaying user address information.
 *
 * @param {Object} props - The component's props.
 * @param {Object} props.dat - The address data to display.
 * @param {function} props.setAddressToEdit - Function to set the address to be edited.
 * @param {function} props.setShowEditForm - Function to control the visibility of the edit form.
 * @returns {JSX.Element} - React component for displaying user address information.
 */
const AddressCard = ({ dat, setAddressToEdit, setShowEditForm}) => {
    /**
     * Handle the click event for editing the address.
     */
  const handleEditClick = () => {
    setShowEditForm(true);
    setAddressToEdit(dat);
  };

    /**
     * Handle the click event for deleting the address.
     */

  const handleDeleteClick = () => {
    const detail = localStorage.getItem("token");
    axios
      .delete(`${baseUrl}/api/shareholderaddress/${dat.id}/`, {
        headers: {
          Authorization: `Token ${detail}`,
        },
      })
      .then((response) => {
        console.log(response);
        toast.success("Address Deleted successfully!", {
          position: "top-right",
          autoClose: 5001,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "light",
        });
      })
      .catch((error) => {
        console.error("Edit form error", error);
        toast.error("Address could not be deleted. Please try again.", {
          position: "top-right",
          autoClose: 5001,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "light",
        });
      });
  };
  
  return (
                <Card
                  key={dat.id}
                  title={dat?.address_type + " ADDRESS"}
                  style={{
                    width: 800,
                  }}
                > 
                 <div className="d-md-flex justify-end align-items-center">
                       <Button icon={<EditOutlined />} onClick={handleEditClick}  style={{ marginRight: '10px', display:'flex', alignItems:'center' }}>
                          Edit
                        </Button>
                        <Button icon={<DeleteOutlined />} onClick={handleDeleteClick} style={{ display:'flex', alignItems:'center' }}> 
                          Delete
                        </Button>
                 </div>
                  <div>
                  {dat?.province?.name && (
                      <p>
                        <b>Province: </b>
                        {dat?.province?.name}
                      </p>
                    )}
                    
                    {dat?.district?.name && (
                      <p>
                        <b>District: </b>
                        {dat?.district?.name}
                      </p>
                    )}
                    
                    {dat?.municipality?.name && (
                      <p>
                        <b>Municipality: </b>
                        {dat?.municipality?.name}
                      </p>
                    )}
                    {dat?.ward && (
                      <p>
                        <b>Ward: </b>
                        {dat?.ward}
                      </p>
                    )}
                    {dat?.address && (
                      <p>
                        <b>District : </b>
                        {dat?.address}
                      </p>
                    )}


                    
                  </div>
                  
                </Card>
  );
};

export default AddressCard;