import React, { Fragment, useEffect, useState } from "react";
import { Button, Table } from "react-bootstrap";
import { FaAngleLeft, FaArrowLeft } from "react-icons/fa";
import ActivityDetailsModal from "./ActivityDetailsModal";
import Image from "next/image";
import RejectModal from "./RejectModal";
import ActivityListingRBAC from "../vendor/ActivityListingRBAC";
import { useDispatch, useSelector } from "react-redux";
import { getActivitiesByVendor, getActivitiesForAdmin } from "../../redux/actions/activityAction";
import { Tag } from "antd";
import { updateApprovalStatusAdmin } from "../../redux/actions/userActions";
import { getAllVendors } from "../../redux/actions/vendorActions";
import { toast } from "react-toastify";

const VendorDetails = ({ id, backClick, setShowDetail, showDetail, detail }) => {
  const { allVendors } = useSelector(state => state.allVendors);

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getActivitiesForAdmin({ vendorId: detail[0].id }));
  }, []);

  useEffect(() => {
    dispatch(getActivitiesForAdmin({ vendorId: detail[0].id }));
  }, [allVendors]);

  console.log("detail", detail);
  const [showActivityDetailsModal, setShowActivityDetailsModal] = useState(false);
  const [showRejectModal, setShowRejectModal] = useState(false);
  const [activityDetailInfo, setactivityDetailInfo] = useState();
  const handleShowActivityDetails = () => {
    setShowActivityDetailsModal(true);
  };
  const handleCloseActivityDetails = () => {
    setShowActivityDetailsModal(false);
  };
  const handleShowRejectModal = () => {
    setShowRejectModal(true);
  };
  const handleCloseRejectModal = () => {
    setShowRejectModal(false);
  };

  //   const UserStatus = () => {

  //     if (!detail || !detail.length > 0) return;
  //     const currentStatus = detail[0].attributes.user.data.attributes.approved;
  //     let message;
  //     let color;
  //     switch (currentStatus) {
  //       case "approved":
  //         message = "Approved";
  //         color = "success";
  //         break;

  //       case "rejected":
  //         message = "Rejected";
  //         color = "error";
  //         break;
  //       case "pending":
  //         message = "Pending";
  //         color = "warning";
  //         break;
  //       default:
  //         break;
  //     }
  //     return <Tag color={color}>{message}</Tag>;
  //   };

  return (
    <Fragment>
      <div className="vendorDetails">
        <div className="row">
          <div className="col-12 col-lg-12">
            <div className="d-flex align-items-center justify-content-between">
              <div className="backDiv">
                <span className="backArrow">
                  <FaAngleLeft
                    onClick={() => {
                      setShowDetail(false);
                    }}
                  />
                </span>
                <span>Vendors List</span>
              </div>
            </div>
          </div>
          <div className="col-8 col-lg-8 mt-4">
            <h4>Business Information</h4>
            <div className="row">
              <div className="col-12 col-lg-4">
                <p className="phead">Business Documents</p>
                <div className="row">
                  <p className="col-12 col-lg-6">Business PAN No.</p>
                  <p className="col-12 col-lg-6">{detail[0].attributes.pan}</p>
                </div>
                <div className="row">
                  <p className="col-12 col-lg-6">PAN</p>
                  <p className="col-12 col-lg-6 pview">View</p>
                </div>
                <div className="row">
                  <p className="col-12 col-lg-6">GST Number</p>
                  <p className="col-12 col-lg-6">{detail[0].attributes.gst}</p>
                </div>
                <div className="row">
                  <p className="col-12 col-lg-6">GST Certificate</p>
                  <p className="col-12 col-lg-6 pview">View</p>
                </div>
                <div className="row">
                  <p className="col-12 col-lg-6">Business Name</p>
                  <p className="col-12 col-lg-6">{detail[0].attributes.businessName}</p>
                </div>
              </div>
              <div className="col-12 col-lg-5 borderLeft">
                <p className="phead">Business Address</p>
                <div className="row">
                  <p className="col-12 col-lg-4">Pincode</p>
                  <p className="col-12 col-lg-8">{detail[0].attributes.pincode}</p>
                </div>
                <div className="row">
                  <p className="col-12 col-lg-4">Country</p>
                  <p className="col-12 col-lg-8">United States</p>
                </div>
                <div className="row">
                  <p className="col-12 col-lg-4">State</p>
                  <p className="col-12 col-lg-8">{detail[0].attributes.state}</p>
                </div>
                <div className="row">
                  <p className="col-12 col-lg-4">City</p>
                  <p className="col-12 col-lg-8">{detail[0].attributes.city}</p>
                </div>
                <div className="row">
                  <p className="col-12 col-lg-4">Address Line 1</p>
                  <p className="col-12 col-lg-8">{detail[0].attributes.addressLine1}</p>
                </div>
                <div className="row">
                  <p className="col-12 col-lg-4">Address Line 2</p>
                  <p className="col-12 col-lg-8">{detail[0].attributes.addressLine2 ? detail[0].attributes.addressLine2 : "N/A"}</p>
                </div>
              </div>
            </div>
          </div>
          <div className=" col-4">
            <div className="row">
              {/* <div className="col-12">
                <div className="row">
                  <div className="col-6">Current status:</div>
                  <div className="col-6">
                    <UserStatus />
                  </div>
                </div>
              </div> */}
              <div className="col-md-12 d-flex">
              <Button
                variant=""
                className="btnAdd btnApprove  col-6 me-2"
                onClick={async () => {
                  await updateApprovalStatusAdmin({ status: "approved", userId: detail[0].attributes.user.data.id });
                  toast.success("User approved");
                  await dispatch(getAllVendors());
                }}
              >
                Approve
              </Button>
              <Button variant="" className="btnAdd btnReject  col-6" onClick={handleShowRejectModal}>
                Reject
              </Button>
              </div>
            </div>
          </div>
          <div className="col-12 col-lg-12 mt-4">
            <h4 className="mb-1">Activities</h4>
            <ActivityListingRBAC setactivityDetailInfo={setactivityDetailInfo} setShowActivityDetailsModal={setShowActivityDetailsModal} />
          </div>
        </div>
      </div>

      {showActivityDetailsModal && <ActivityDetailsModal show={showActivityDetailsModal} handleClose={handleCloseActivityDetails} activityDetailInfo={activityDetailInfo} />}

      {showRejectModal && <RejectModal show={showRejectModal} handleClose={handleCloseRejectModal} detail={detail} setShowDetail={setShowDetail} />}
    </Fragment>
  );
};
export default VendorDetails;