import { useCallback, useEffect, useMemo, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
import usersService from "../../services/UsersService";
import { PriceFormatter } from "../Helpers/PriceFormatter";
import dataImage2 from "../../assets/images/data-table-user-2.png";

export default function AvailableJobsCard({
  className,
  datas,
  hidden = false,
  contentDisplay,
}) {
  //debugger;
  const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
  const [imageUrl, setImageUrl] = useState("");

  let thePrice = PriceFormatter(
    datas?.price * 0.01,
    datas?.currency_code,
    datas?.currency
  );

  useEffect(() => {
    const imagePath = require(`../../assets/images/${datas.thumbnil}`); // Replace with your directory path for local images
    setImageUrl(imagePath);
  }, []);
  return (
    <>
      {contentDisplay == "grid" ? (
        <div
          className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
            className || ""
          }`}
        >
          <div
            onClick={() => {
              setMarketPopUp({ show: true, data: datas });
            }}
            className="flex flex-col justify-between w-full h-full"
          >
            <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
              {datas.title}
            </h1>

            <div className="card-two-info flex justify-between items-center">
              <div className="owned-by flex space-x-2 items-center">
                <div>
                  <p className="text-thin-light-gray text-sm leading-3">
                    Added
                  </p>
                  <p className="text-base   text-dark-gray dark:text-white">
                    {datas.offer_added}
                  </p>
                </div>
              </div>
              <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple  h-7"></div>
              <div className="created-by flex space-x-2 items-center flex-row-reverse">
                <div>
                  <p className="text-thin-light-gray text-sm leading-3 text-right">
                    Expires
                  </p>
                  <p className="text-base text-dark-gray dark:text-white text-right">
                    {datas.expire}
                  </p>
                </div>
              </div>
            </div>
            <div className="thumbnail-area w-full">
              <div
                className="w-full h-[236px] p-6  rounded-xl overflow-hidden bg-center bg-cover bg-no-repeat"
                style={{
                  backgroundImage: `url('${imageUrl}')`,
                }}
              >
                <div className="flex justify-center">{datas.description}</div>
              </div>
            </div>
            <div className="details-area">
              <div className="product-two-options flex justify-between mb-5 relative">
                {/*      <div className="status">*/}
                {/*          {datas.isActive && (*/}
                {/*              <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
                {/*  Active*/}
                {/*</span>*/}
                {/*          )}*/}
                {/*      </div>*/}

                {/*<div className=" review flex space-x-2">*/}
                {/*    <button*/}
                {/*        onClick={favoriteHandler}*/}
                {/*        type="button"*/}
                {/*        className={`w-7 h-7 bg-white    rounded-full flex justify-center items-center  ${*/}
                {/*            addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
                {/*        }`}*/}
                {/*    >*/}
                {/*        <Icons name="star" />*/}
                {/*    </button>*/}
                {/*</div>*/}
              </div>

              <div className="flex justify-between">
                <div className="flex items-center space-x-2">
                  <div>
                    <p className="font-bold text-xl tracking-wide line-clamp-1   text-dark-gray dark:text-white">
                      {/* {thePrice} | {datas.timeline_days} day(s) */}
                      {thePrice}
                    </p>
                    <p className="text-sm text-lighter-gray">
                      ( {datas.offer_code}) |
                      <span className="italic ml-1">
                        {datas.timeline_days} day(s)
                      </span>
                    </p>
                  </div>
                </div>
                <div>
                  <button
                    type="button"
                    className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
                    onClick={() => {
                      setMarketPopUp({ show: true, data: datas });
                    }}
                  >
                    View
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      ) : (
        <div className="card-style-two w-full p-8 my-2 flex items-center gap-4 bg-white dark:bg-dark-white rounded-2xl section-shadow">
          <div className="flex gap-5 items-center w-full">
            <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px] max-w-[60px]">
              <img src={dataImage2} alt="data" className="w-full h-full" />
            </div>
            <div className="flex flex-col flex-[0.9]">
              <h1
                onClick={() => {
                  setMarketPopUp({ show: true, data: datas });
                }}
                className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize"
              >
                {datas?.title}
              </h1>

              <div
                onClick={() => {
                  setMarketPopUp({ show: true, data: datas });
                }}
                className="my-2"
              >
                <p className="text-dark-gray dark:text-white">
                  {datas?.description}
                </p>
              </div>

              {/* <div className="card-two-info flex gap-2 items-center">
              <div className="owned-by flex space-x-2 items-center">
                <div>
                  <p className="text-thin-light-gray text-sm leading-3">Added</p>
                  <p className="text-base   text-dark-gray dark:text-white">
                    {datas.offer_added}
                  </p>
                </div>
              </div>
              <div className="w-[1px] bg-light-purple dark:bg-dark-light-purple  h-7"></div>
              <div className="created-by flex space-x-2 items-center flex-row-reverse">
                <div>
                  <p className="text-thin-light-gray text-sm leading-3 text-right">
                    Expires
                  </p>
                  <p className="text-base text-dark-gray dark:text-white text-right">
                    {datas.expire}
                  </p>
                </div>
              </div>
            </div> */}
              <div className="block sm:flex flex-wrap gap-4">
                <p className="text-sm text-thin-light-gray flex flext-start gap-1">
                  Price: <span className="text-purple">{thePrice}</span>
                </p>
                <p className="text-sm text-thin-light-gray">
                  Duration:{" "}
                  <span className="text-purple italic">
                    {" "}
                    {datas?.timeline_days} day(s)
                  </span>
                </p>
                <p className="text-sm text-thin-light-gray">
                  Code:{" "}
                  <span className="text-purple"> {datas?.offer_code}</span>
                </p>
              </div>
            </div>
          </div>
          <div className="">
            <button
              type="button"
              className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
              onClick={() => {
                setMarketPopUp({ show: true, data: datas });
              }}
            >
              View
            </button>
          </div>
        </div>
      )}
      {marketPopUp.show && (
        <MarketPopUp
          details={datas}
          onClose={() => {
            setMarketPopUp({ show: false, data: {} });
          }}
          situation={marketPopUp.show}
        />
      )}
    </>
  );
}