import React, { useState } from "react";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";
import heroBg from "../../assets/images/hero-bg.svg";
import heroUser from "../../assets/images/hero-user.png";
import slider1 from "../../assets/images/slider-1.jpg";
import slider2 from "../../assets/images/slider-2.jpg";
import slider3 from "../../assets/images/slider-3.jpg";
import CountDown from "../Helpers/CountDown";
import SliderCom from "../Helpers/SliderCom";
import HomeSliders from "./HomeSliders";
import { useSelector } from "react-redux";

export default function Hero({ className,bannerList }) {
  const settings = {
    autoplay: true,
    dots: true,
    arrows: false,
    infinite: true,
    swipe: true,
  };
  const sildeData =null;
  const [addFavorite, setValue] = useState(false);

  const {userDetails} = useSelector((state) => state?.userDetails)
  const favoriteHandler = () => {
    if (!addFavorite) {
      setValue(true);
      toast.success("Added to Favorite List");
    } else {
      setValue(false);
      toast.warn("Remove to Favorite List");
    }
  };

  let loginDate = userDetails?.last_login.split(' ')[0]
  let {firstname, lastname, email, profile_pic} = userDetails
  let userEmail = email.split('@')[0]

  return (
    <div
      className={`w-full lg:h-[444px] h-full lg:flex lg:p-8 p-4 justify-between items-center lg:space-x-28 rounded-2xl overflow-hidden ${
        className || ""
      }`}
      style={{
        background: `url(${heroBg})`,
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover",
      }}
    >
      <div className="flex-1 h-[330px] lg:h-full flex flex-col justify-between mb-5 lg:mb-0">
        {/* heading */}
        <div>
          <h1 className="lg:text-2xl text-xl font-medium text-white tracking-wide">
            Welcome
          </h1>
          <span className="text-[18px] font-thin tracking-wide text-white">
            Last Login :  {loginDate}
          </span>
        </div>
        {/* user */}
        <div className="flex items-center space-x-3">
          <div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">
            <img src={profile_pic != '' ? profile_pic : heroUser} alt="" />
          </div>
          <div>
            <p className="text-xl tracking-wide font-bold antise text-white">
              {`${firstname} ${lastname}`}
            </p>
            <p className="text-sm tracking-wide text-white">@{userEmail}</p>
          </div>
        </div>
        {/* countdown */}
        <div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border border-white-opacity">
          <div className="flex flex-col justify-between">
            <p className="text-base text-white tracking-wide">Current Task</p>
            <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
              ABCDEFGH01
            </p>
            <p className="text-base text-white tracking-wide">773.69 USD</p>
          </div>
          <div className="w-[1px] h-full bg-white-opacity"></div>
          <div className="flex flex-col justify-between">
            <p className="text-base text-white tracking-wide">Next due in</p>
            <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
              <CountDown lastDate="2023-04-26 4:00:00" />
            </p>
            <div className="text-base text-white tracking-wide flex gap-[23px]">
              <span>Hrs</span>
              <span>Min</span>
              <span>Sec</span>
            </div>
          </div>
        </div>
        {/* action */}
        <div className="flex lg:space-x-3 space-x-1 items-center">
          <Link
            to="/mytask"
            className="text-white text-base sm:block hidden"
          >
            <span className=" border-b dark:border-[#5356fb29]  border-white">
              {" "}
              View All Task(s)
            </span>
          </Link>
        </div>
      </div>
      <HomeSliders
          settings={settings}
          sideData={sildeData}
          bannerList={bannerList}
      />
    </div>
  );
}