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";
import { GenericLayout } from "../../../components/layout/Generics/GenericLayout";

const VendorDashboard = () => {
  const { loadedUser, error } = useSelector(state => state.loadedUser);
  const router = useRouter();
  console.log("user", loadedUser);

  const ApprovalStatus = () => {
    if (loadedUser) {
      switch (loadedUser.approved) {
        case "approved":
          return (
            <>
              <div className="col-12 offset-lg-2 col-lg-8 ">
                <div className="alert alert-success alert-dismissible fade show text-center" role="alert">
                  <div className="text-center">
                    <p className="p1 text-center">Profile is approved!</p>
                    <p className="p2 text-center">You can add activities.</p>
                  </div>
                </div>
              </div>
            </>
          );

        case "rejected":
          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="text-center">
                    <p className="p1 text-center">Your profile has been rejected!</p>
                    <p className="p2 text-center"> Please contact the admin for more details!</p>
                  </div>
                </div>
              </div>
            </>
          );

        case "pending":
          return (
            <>
              <div className="col-12 offset-lg-2 col-lg-8 ">
                <div className="alert alert-warning alert-dismissible fade show text-center" role="alert">
                  <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>
                </div>
              </div>
            </>
          );

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

        default:
          break;
      }
    }
  };

  return (
    <GenericLayout>
      {/* <div className="sidebarContainer">
        <Sidebar /> */}
        <div className="h-100 d-flex-align-items-center justify-content-center p-5">
            <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">
              <p className="p3">No information is available right now</p>
              <Button
                onClick={() => {
                  router.push("/vendor/activity-details");
                }}
                type="button"
                variant=""
                className="btnAdd"
                disabled={loadedUser?.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> */}
    </GenericLayout>
  );
};

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: {}
  };
});