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 { 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 }));
    console.log("cancel policy", detail[0]);
  }, []);

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

  const [tableCurrentPage, settableCurrentPage] = useState(1);
  const [tableItemsPerPage, settableItemsPerPage] = useState(10);

  const onChange = (pagination, filters, sorter, extra) => {
    console.log("params", pagination, filters, sorter, extra);
    settableCurrentPage(pagination.current);
    settableItemsPerPage(pagination.pageSize);
    dispatch(getActivitiesForAdmin({ vendorId: detail[0].id, pageNumber: pagination.current, pageSize: pagination.pageSize }));
  };

  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?.toUpperCase()}</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-5">
                <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> */}
                {detail[0].attributes.uniqueVendorId && (
                  <div className="row">
                    <p className="col-12 col-lg-6">Vendor ID</p>
                    <p className="col-12 col-lg-6">{detail[0].attributes.uniqueVendorId}</p>
                  </div>
                )}
                <div className="row">
                  <p className="col-12 col-lg-6">EIN Number</p>
                  <p className="col-12 col-lg-6">{detail[0].attributes.einNumber}</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 className="row">
                  <p className="col-12 col-lg-6">Vendor website:</p>
                  <p className="col-12 col-lg-6">{detail[0].attributes.businessName}</p>
                </div> */}
              </div>
              <div className="col-12 col-lg-7 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 className="col-12">
                <div className="d-flex align-items-center gap-4">
                  <p className="phead m-0">Status :</p> <UserStatus />
                </div>
              </div>
            </div>
          </div>
          <div className="col-12 col-lg-12 mt-4">
            <h4 className="mb-1">Activities</h4>
            <ActivityListingRBAC
              setactivityDetailInfo={setactivityDetailInfo}
              setShowActivityDetailsModal={setShowActivityDetailsModal}
              onChange={onChange}
              tableCurrentPage={tableCurrentPage}
              tableItemsPerPage={tableItemsPerPage}
            />
          </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;