import { AddIcon, DraggerIcon } from "@/assets/svgs/Icons";
import AppTable from "@/components/UiComponents/table/AppTable";
import { Checkbox, Input, InputNumber, Tooltip } from "antd";
import { AppDispatch, RootState } from "@/store/store";
import { useDispatch, useSelector } from "react-redux";
import { openMediaModal, openOfferModal, setMainProduct, updateVariableField } from "@/store/createProduct";
import { FiEye, FiEyeOff } from "react-icons/fi";
import { SecEditIcon } from "@/assets/svgs/TraderIcons";
import MediaModal from "./MediaModal";
import ImageWithFallback from "@/components/UiComponents/ImageWithFallback";
import OfferModal from "./OfferModal";
import { useTranslations } from "next-intl";
import { useEffect } from "react";

const VariantsTable = ({ details }: { details: any }) => {
  const t = useTranslations();
  const dispatch = useDispatch<AppDispatch>();
  const { isUnifiedOffers, isUnifiedPrice, allVariablesItems, mainLoader, mainProductId } = useSelector((state: RootState) => state.ProductConfig);

  useEffect(() => {
    if (details) {
      details.map((item: any) => {
        if (item.is_default) {
          dispatch(setMainProduct(item?.id));
        }
      });
    }
  }, [details]);


  

  const handleChange = (id: number, field: string, value: any) => {
    dispatch(updateVariableField({ id, field, value }));
  };

  const handleMainProductChange = (id: number) => {
    dispatch(setMainProduct(id));
  };

  const columns = [
    {
      title: t("tables.main_product"),
      dataIndex: "is_default",
      key: "is_default",
      render: (_: any, record: any) => {
        const currentId =  record.id || record.default_key;
        return (
          <Checkbox
            onChange={() => handleMainProductChange(currentId)}
            checked={mainProductId === currentId}
          />
        );
      },
      width: "8%",
    },
    {
      title: t("my_products.variants"),
      dataIndex: "variants",
      key: "variants",
      render: (_: any, record: any) => {
          const name = record?.name || record?.features?.map((feature: any) => `${feature?.value?.value}`).join(" - ") ;
          const mainImg =  record?.media[0]?.media || record?.media[0]?.url || `${process.env.NEXT_PUBLIC_PRODUCT_URL}${record?.media[0]}` || "";
          return (
            <div className="flex items-center gap-2" key={`image_${mainImg}`}>
              <button
                onClick={() => dispatch(openMediaModal({ ...record }))}
                className="size-14 object-contain flex-center-content bg-greynormal rounded-xl"
              >
                {record?.media?.length ? (
                  <ImageWithFallback
                    src={mainImg}
                    width={80}
                    height={80}
                    alt={`product-name`}
                    className="size-full object-contain bg-greynormal rounded-2xl border border-platinum"
                  />
                ) : (
                  <DraggerIcon />
                )}
              </button>
              <span className="uppercase">{name}</span>
            </div>
          );
      },
    },
    ...(!isUnifiedPrice
      ? [
          {
            title: t("Text.price"),
            dataIndex: "price",
            key: "price",
            render: (_: any, record: any) => (
              <div className="app-form">
                <Input
                  type="number"
                  suffix="د.ع"
                  placeholder="00"
                  defaultValue={record.price}
                  onBlur={(e) => handleChange((record.id || record.default_key), "price", Number(e.target.value))}
                />
              </div>
            ),
            width: "20%",
          },
        ]
      : []),
    {
      title: t("tables.quantity"),
      dataIndex: "quantity",
      key: "quantity",
      render: (_: any, record: any) => (
        <div className="app-form">
          <Input
            type="number"
            placeholder="00"
            defaultValue={record.quantity}
            onBlur={(e) => handleChange((record.id || record.default_key), "quantity", Number(e.target.value))}
          />
        </div>
      ),
      width: "20%",
    },
    {
      title: t("tables.show"),
      dataIndex: "is_active",
      key: "is_active",
      align: "center",
      render: (_: any, record: any) => (
        <div
          className="w-fit mx-auto p-3 cursor-pointer rounded-xl hover:bg-secprimary group transition-colors duration-500"
          onClick={() => handleChange((record.id || record.default_key), "is_active", !record.is_active)}
        >
          {record.is_active ? (
            <Tooltip title={t("my_products.hide_from_store")}>
              <FiEye className="size-6 group-hover:text-primary transition-colors duration-500" />
            </Tooltip>
          ) : (
            <Tooltip title={t("my_products.show_from_store")}>
              <FiEyeOff className="size-6 group-hover:text-primary transition-colors duration-500" />
            </Tooltip>
          )}
        </div>
      ),
    },
    ...(!isUnifiedOffers
      ? [
          {
            title: t("Text.offers"),
            dataIndex: "offer",
            key: "offer",
            render: (_: any, record: any) => (
              record?.offer?.offer_value || record?.offer?.discount  ? (
                <div className="flex items-center gap-2">
                  {record?.offer?.offer_value || record?.offer?.discount} %
                  <button onClick={() => dispatch(openOfferModal({ ...record }))}>
                    <SecEditIcon />
                  </button>
                </div>
              ) : (
                <button
                  className="app-btn group !px-4 !py-2 !min-h-10 !text-sm !min-w-24 !rounded-2xl"
                  onClick={() => dispatch(openOfferModal({ ...record }))}
                >
                  <AddIcon className="group-hover:*:stroke-primary" /> {t("Text.add")}
                </button>
              )
            ),
          },
        ]
      : []),
  ];

  return (
    <>
      <OfferModal />
      <MediaModal />
      <AppTable
        key={allVariablesItems}
        columns={columns}
        dataSource={allVariablesItems}
        tableTitle={t("my_products.merge_variables")}
        loading={mainLoader}
        className="variants-table"
        showSelection={false}
      />
    </>
  );
};

export default VariantsTable;