import { useState } from "react";
import { PriceFormatter } from "../Helpers/PriceFormatter";
import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";

export default function AvailableJobsCard({
  className,
  datas,
  hidden = false,
  contentDisplay,
  image_server,
}) {
  //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);
  // }, []);

  const image = localStorage.getItem("session_token")
    ? `${image_server}${localStorage.getItem("session_token")}/job/${
        datas.job_uid
      }`
    : "";

  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">
                    {new Date(datas.offer_added).toLocaleDateString()}
                  </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">
                    {new Date(datas.expire).toLocaleDateString()}
                  </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('${image}')`,
                }}
              >
                <div className="flex justify-center bg-slate-100 p-2 rounded-md">
                  {datas.description}
                </div>
              </div>
            </div>
            <div className="details-area">
              <div className="product-two-options flex justify-between mb-5 relative"></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 px-4 py-[0.4rem] 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={image} 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="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}
        />
      )}
    </>
  );
}