import { CheckOutlined, DeleteTwoTone, EyeTwoTone, StopOutlined, StopTwoTone } from "@ant-design/icons";
import { Space, Table, Tag } from "antd";
import { getSession } from "next-auth/react";
import { useRouter } from "next/router";
import { Fragment, useEffect, useState } from "react";
import { Button, Image } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { loadUser } from "../../redux/actions/userActions";
import { getAllVendors } from "../../redux/actions/vendorActions";
import VendorDetailModal from "./VendorDetailModal";
import VendorDetails from "./VendorDetails";

const VendorListing = () => {
  // Hooks
  const dispatch = useDispatch();
  const router = useRouter();
  const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  // useState
  const [session, setSession] = useState();
  const [loading, setLoading] = useState(true);
  const [showMenuIndex, setShowMenuIndex] = useState(null);
  const [restriction, setRestriction] = useState(false);
  const [data, setData] = useState([]);
  const [showDetail, setShowDetail] = useState(false);
  const [detail, setDetail] = useState();

  // selectors
  const { loadedUser } = useSelector(state => state.loadedUser);
  const { allVendors } = useSelector(state => state.allVendors);
  const toggleMenu = index => {
    setShowMenuIndex(index === showMenuIndex ? null : index);
  };

  // Session
  // useEffect(() => {
  //   const fetchSession = async () => {
  //     setSession(await getSession());
  //   };
  //   fetchSession();
  //   // dispatch(getLoggedInVendor());
  // }, []);
  // useEffects

  useEffect(() => {
    dispatch(loadUser());
    // console.log(">>", loadedUser);
    // if (!loadedUser) {
    //   router.push("/admin/login")
    // }
    if (loadedUser && loadedUser.role.name != "admin") {
      setRestriction(true);
      setLoading(true);
    } else {
      setRestriction(false);

      setLoading(false);
    }
    // if (!loadedUser) {
    //   setRestriction(true);
    //   return
    // }
  }, []);
  // console.log("session", loadedUser);

  useEffect(() => {
    if (!loadedUser) return;
    dispatch(getAllVendors());
  }, [loadedUser]);

  console.log("allVendors", allVendors);
  const [vendorId, setVendorId] = useState(null);
  const [showVendorDetails, setShowVendorDetails] = useState(false);
  const handleShowVendorDetails = () => {
    setShowVendorDetails(true);
  };
  const handleCloseVendorDetails = () => {
    setShowVendorDetails(false);
  };

  // useEffect

  useEffect(() => {
    setLoading(true);
    let initialData =
      allVendors &&
      allVendors.map(item => {
        return {
          key: item.id,
          name: item.attributes.name,
          businessName: item.attributes.businessName,
          status: [item.attributes.user.data.attributes.approved],
          confirmed: item.attributes.user.data.attributes.confirmed
        };
      });
    console.log("initialData", initialData);
    setData(initialData);
    setLoading(false);
  }, [allVendors]);

  const columns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      render: text => <a>{text}</a>
    },
    {
      title: "Business Name",
      dataIndex: "businessName",
      key: "businessName"
    },
    {
      title: "OTP verified",
      dataIndex: "confirmed",
      key: "confirmed",
      render: (_, { confirmed }) => (
        <>
          <>{confirmed ? <CheckOutlined /> : <StopOutlined />}</>
        </>
      )
    },
    {
      title: "Approved",
      key: "status",
      dataIndex: "status",
      render: (_, { status }) => (
        <>
          {status.map(tag => {
            // console.log("tag", tag);
            let color;
            // if (tag === "loser") {
            //   color = "volcano";
            // }
            switch (tag) {
              case "approved":
                color = "green";
                break;
              case "pending":
                color = "orange";
                break;

              case "none":
                color = "red";
                break;

              case "rejected":
                color = "red";
                break;

              default:
                break;
            }
            // console.log("color", color);
            return (
              <Tag color={color} key={tag}>
                {tag.toString().toUpperCase()}
              </Tag>
            );
          })}
        </>
      )
    },
    {
      title: "Action",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          {/* <DeleteTwoTone style={{ fontSize: '22px' }}  twoToneColor="red"/> */}
          <EyeTwoTone
            style={{ fontSize: "22px" }}
            onClick={() => {
              setShowDetail(true);
              setDetail(allVendors.filter(item => item.id == record.key));
            }}
          />
          {/* <StopTwoTone style={{ fontSize: "20px" }} twoToneColor="red" /> */}
        </Space>
      )
    }
  ];

  return (
    <Fragment>
      <div className={restriction ? "overlay" : ""}>
        {restriction ? (
          <div className="d-flex justify-content-center align-items-center" style={{ color: "#FFF", fontSize: "50px", height: "100%" }}>
            Access restricted! Only admin is allowed to view the data.
          </div>
        ) : (
          <div>
            {!showDetail ? (
              <Table loading={loading} columns={columns} dataSource={data} />
            ) : (
              // <VendorDetailModal  />
              <VendorDetails setShowDetail={setShowDetail} showDetail={showDetail} detail={detail} />
            )}
            <div></div>
          </div>
        )}
      </div>
    </Fragment>
    // <Fragment>
    //   {!showVendorDetails && (
    //     <div className="row">
    //       <div className="col-12 col-lg-12">
    //         <div className="rightContent">
    //           <div className="d-flex align-items-center justify-content-between px-2 mb-2">
    //             <div>
    //               <h2>Vendors</h2>
    //               <p>View all the vendors</p>
    //             </div>
    //             <div>
    //               <Button type="button" variant="" className="btnAdd m-0">
    //                 <Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2" /> Filter
    //               </Button>
    //             </div>
    //           </div>
    //           <Table responsive className="listingTable">
    //             <thead>
    //               <tr>
    //                 <th>
    //                   <label className="check-container mb-0 ps-2" htmlFor="checkh">
    //                     <input type="checkbox" id="checkh" className="check-box" />
    //                     <span className="checkmark"></span>
    //                   </label>
    //                 </th>
    //                 <th>Vendor</th>
    //                 <th>Vendor Id</th>
    //                 <th>Contact Person</th>
    //                 <th>Phone Number</th>
    //                 <th>Email Address</th>
    //                 <th>Status</th>
    //                 <th></th>
    //               </tr>
    //             </thead>
    //             <tbody>
    //               {array.map((data, index) => (
    //                 <tr key={index}>
    //                   <td>
    //                     <label className="check-container mb-0 ps-2" htmlFor={`check${index}`}>
    //                       <input type="checkbox" id={`check${index}`} className="check-box" />
    //                       <span className="checkmark"></span>
    //                     </label>
    //                   </td>
    //                   <td>
    //                     <span
    //                       onClick={() => {
    //                         setVendorId(1);
    //                         handleShowVendorDetails();
    //                       }}
    //                     >
    //                       M S Adventure
    //                     </span>
    //                   </td>
    //                   <td>VN_ET9797</td>
    //                   <td>Ridge Johnson</td>
    //                   <td>+91 9865 43210</td>
    //                   <td>adventuretrails@example.com</td>
    //                   <td>
    //                     <div className={`statusDiv ${index % 2 ? "inactive" : "active"}`}>{index % 2 ? "Inactive" : "Active"}</div>
    //                   </td>
    //                   <td>
    //                     <div className="actions">
    //                       <div className="ellipse" onClick={() => toggleMenu(index)}>
    //                         <Image alt="" width={20} height={20} src="/images/vendor/icon-more-vertical.svg" />
    //                       </div>
    //                       {showMenuIndex === index && (
    //                         <div className="menu">
    //                           <ul>
    //                             <li>View</li>
    //                             <li>Deactivate</li>
    //                             <li>Delete</li>
    //                           </ul>
    //                         </div>
    //                       )}
    //                     </div>
    //                   </td>
    //                 </tr>
    //               ))}
    //               <tr>
    //                 <td colSpan={7}>Showing Results 10 of 1567</td>
    //               </tr>
    //             </tbody>
    //           </Table>
    //         </div>
    //       </div>
    //     </div>
    //   )}

    //   {vendorId && showVendorDetails && <VendorDetails id={vendorId} backClick={handleCloseVendorDetails} />}
    // </Fragment>
  );
};

export default VendorListing;