"use client";

import Image from "next/image";
import PersianNumber from "plugins/PersianNumber";
import React, { useContext, useState } from "react";
import p1 from "../../../public/images/product/1.png";
import AppContext from "@ctx/AppContext";
import Link from "next/link";

const CardCategoriesMobile = ({ data }) => {
  const CTX = useContext(AppContext);
  const cart = CTX.state.cart;

  console.log("data ", data, cart);

  return (
    <div className="group border-t-[1px] border-gray-200  w-full hover:bg-white z-40 tr03 flex rtl pt-2 px-3">
      <div className=" h-fit  ">
        <Image src={p1} className="xs:w-[130px] lg:w-[120px] " />
      </div>
      <div className="p-3 text-right w-full">
        <p className="mb-0 xs:text-[12px] lg:text-[11px] xl:text-[15px]  max-h-[50px] tr03   ">
          {data?.persianName}
        </p>
        {data?.hasDiscount && (
          <p className="mb-0  xs:text-[11px] lg:text-[12px] xl:text-[13px]  text-red-600 font-medium">
            {" "}
            3 عدد موجود انبار
          </p>
        )}

        <div className=" rounded-full flex ltr  pt-2 mt-2  w-full">
          <div className="flex">
            {/*{cart.find(e=>id)}*/}
            {!cart.find((item) => item.id === data.id) ? (
              <div className="w-[35px] h-[35px] bg-gray-200 overflow-hidden rounded-full  ">
                <div
                  onClick={() =>
                    CTX.AddItemToCart(data.id, data.persianName, data.cost)
                  }
                >
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 176 176"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className="mx-auto mt-[8px]"
                  >
                    <path
                      d="M163 100.475H100.5V162.975C100.5 166.29 99.183 169.47 96.8388 171.814C94.4946 174.158 91.3152 175.475 88 175.475C84.6848 175.475 81.5054 174.158 79.1612 171.814C76.817 169.47 75.5 166.29 75.5 162.975V100.475H13C9.68479 100.475 6.50537 99.1581 4.16117 96.8139C1.81696 94.4697 0.5 91.2903 0.5 87.9751C0.5 84.6599 1.81696 81.4805 4.16117 79.1363C6.50537 76.7921 9.68479 75.4751 13 75.4751H75.5V12.9751C75.5 9.65989 76.817 6.48046 79.1612 4.13626C81.5054 1.79205 84.6848 0.475098 88 0.475098C91.3152 0.475098 94.4946 1.79205 96.8388 4.13626C99.183 6.48046 100.5 9.65989 100.5 12.9751V75.4751H163C166.315 75.4751 169.495 76.7921 171.839 79.1363C174.183 81.4805 175.5 84.6599 175.5 87.9751C175.5 91.2903 174.183 94.4697 171.839 96.8139C169.495 99.1581 166.315 100.475 163 100.475Z"
                      fill="black"
                    />
                  </svg>
                </div>
              </div>
            ) : (
              <div className="flex rtl">
                <div
                  className="w-[35px] h-[35px] bg-gray-200 overflow-hidden rounded-full text-center "
                  onClick={() =>
                    CTX.AddItemToCart(data.id, data.persianName, data.cost)
                  }
                >
                  <p className="mb-0  text-[25px] mt-[-2px]">+</p>
                </div>
                <p className="mb-0 mx-2 mt-1 font-bold">
                  <PersianNumber
                    number={cart.find((item) => item.id === data.id).count}
                  />
                </p>
                <div
                  className="w-[35px] h-[35px] bg-red-200 overflow-hidden rounded-full text-center "
                  onClick={() => CTX.RemoveItemFromCart(data.id)}
                >
                  <p className="mb-0  text-[30px] mt-[-5px]">-</p>
                </div>
              </div>
            )}
          </div>

          <div className="w-full  text-right rounded-full">
            {data?.hasDiscount ? (
              <div className="flex justify-end">
                <p className="mb-0 font-bold text-sm absolute opacity-40 mt-[-7px] ml-[20px] text-red-600">
                  <del>
                    <PersianNumber number={data?.cost} style={"text-[13px]"} />
                  </del>
                </p>
                <div className="flex rtl mt-[8px]">
                  {" "}
                  <p className="mb-0 font-bold">
                    <PersianNumber number={data?.cost} />
                  </p>
                  <small className="mr-1 mt-[3px]">تومان</small>
                </div>
              </div>
            ) : (
              <div className="flex rtl mt-[3px]">
                {" "}
                <p className="mb-0 font-bold text-lg">
                  <PersianNumber number={data?.cost} />
                </p>
                <small className="mr-1 mt-[6px]">تومان</small>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default CardCategoriesMobile;