import Image from "next/image";
import React, { useEffect, useState } from "react";
import Sidebar from "../../../components/layout/VendorDashboardSidebar";
import Layout from "../../../components/layout/Layout";
import { Button } from "react-bootstrap";
import { FaPlus } from "react-icons/fa";
import { useDispatch, useSelector } from "react-redux";
import { loadUser } from "../../../redux/actions/userActions";
import { wrapper } from "../../../redux/store";
import { useRouter } from "next/router";

const VendorDashboard = () => {
  const { user, error } = useSelector(state => state.loadedUser);
  const router = useRouter();
  console.log("user", user);
  const [collapsed, setCollapsed] = useState(false);

  const toggleSidebar = () => {
    setCollapsed(!collapsed);
  };

  const ApprovalStatus = () => {
    if (user) {
      switch (user.approved) {
        case "approved":
          return <></>;

        case "rejected":
          return (
            <>
              <div class="alert alert-danger" role="alert">
                Your profile has been rejected! Please contact the admin for more details!
              </div>
            </>
          );

        case "pending":
          return (
            <>
              <div className="col-12 offset-lg-2 col-lg-8 ">
                <div className="alert alert-danger alert-dismissible fade show text-center" role="alert">
                  {/* <div className="bgCircleBlue">
                  <Image alt="" src="/images/vendor/icon-tick.svg" width="15" height="10" />
                </div> */}
                  <div className="text-center">
                    <p className="p1 text-center">Business information sent successfully.</p>
                    <p className="p2 text-center">Kindly wait until we verify the details. You can start adding activities once your account is verified.</p>
                  </div>
                  {/* <button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> */}
                </div>

                {/* <div className="infoSent">
                <div className="bgCircleBlue">
                  <Image alt="" src="/images/vendor/icon-tick.svg" width="15" height="10" />
                </div>
                <div className="px-3">
                  <p className="p1">Business information sent successfully.</p>
                  <p className="p2">Kindly wait until we verify the details. You can start adding activities once your account is verified.</p>
                </div>
                <div>
                  <Image alt="" src="/images/vendor/icon-close.svg" width="14" height="14" />
                </div>
              </div> */}
              </div>
            </>
          );

        case "none":
          return <></>;

        default:
          break;
      }
    }
  };

  return (
    <Layout>
      <div className="sidebarContainer">
        <Sidebar collapsed={collapsed} toggleSidebar={toggleSidebar} />
        <div className="content">
          <div className="row">
            <ApprovalStatus />
            <div className="d-flex justify-content-center py-4">
              <span className="image-container">
                <Image alt="" layout="fill" src="/images/vendor/Isolation_Mode.png" className="image" />
              </span>
            </div>
            <div className="text-center py-2 mb-5">
              <p className="p3">No information is available right now</p>
              <Button
                onClick={() => {
                  router.push("/vendor/activity-details");
                }}
                type="button"
                variant=""
                className="btnAdd"
                disabled={user?.approved != "approved"}
              >
                <span className="image-container me-2">
                  <Image alt="" layout="fill" src="/images/vendor/icon-plus.svg" width="14" height="14" className="image" />
                </span>
                {/* <FaPlus className="me-2" /> */}
                <span>Add Activity</span>
              </Button>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default VendorDashboard;

/** For server side rendering */
export const getServerSideProps = wrapper.getServerSideProps(store => async ({ req, query }) => {
  // Get the menu data.

  // get the locations data.
  await store.dispatch(loadUser());

  return {
    props: {}
  };
});