import React, { useState } from "react";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";
import heroBg from "../../assets/images/bg-sky-blue.jpg"; //hero-bg.svg";
import heroUser from "../../assets/images/hero-user.png";
import CountDown from "../Helpers/CountDown";
import HomeSliders from "./HomeSliders";
import { useSelector } from "react-redux";

export default function Hero({ className, bannerList, nextDueTask }) {
  const settings = {
    autoplay: true,
    dots: true,
    arrows: false,
    infinite: true,
    swipe: true,
  };
  const sildeData = null;
  const { userDetails } = useSelector((state) => state?.userDetails);

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

  return (
    <div
      className={`w-full min-h-[400px] md:grid grid-cols-2 lg:p-8 p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden ${
        className || ""
      }`}
      style={{
        background: `url(${heroBg})`,
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover",
      }}
    >
      <div className="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 */}
        {nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length != 0 && (
          <div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 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">
                {(nextDueTask.next_due.item_code).substr(0,4)+'...'}
              </p>
              <p className="text-base text-white tracking-wide">
                {nextDueTask.next_due.price * 0.01} Naira
              </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" /> */}
                <CountDown lastDate={nextDueTask.next_due.due_date} />
              </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">
            <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>
  );
}