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();
  // 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, loading: vendorLoading, totalCount } = 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({ pageNumber: 1, pageSize: 10 }));
  }, [loadedUser]);

  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(getAllVendors({ pageNumber: pagination.current, pageSize: pagination.pageSize }));
  };

  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 => {
        console.log("item", item.attributes.user.data);
        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="p-5">
        <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={vendorLoading}
                  columns={columns}
                  dataSource={data}
                  onChange={onChange}
                  pagination={{
                    current: tableCurrentPage,
                    pageSize: tableItemsPerPage,
                    total: totalCount
                  }}
                />
              ) : (
                // <VendorDetailModal  />
                <VendorDetails setShowDetail={setShowDetail} showDetail={showDetail} detail={detail} />
              )}
              <div></div>
            </div>
          )}
        </div>
      </div>
    </Fragment>
  );
};

export default VendorListing;