import { Button, Divider, Space, Switch, Tag, Skeleton } from "antd";
import ProInputCard from "components/ProInputCard/ProInputCard";
import ProText from "components/ProText";
import { useTranslation } from "react-i18next";
import styles from "./GiftItemsCard.module.css";
import { useParams } from "react-router-dom";
import {
  useGetOrderDetailsQuery,
  useGetRedeemDetailsQuery,
} from "redux/api/others";
import ImageWithFallback from "components/ImageWithFallback";
import { useAppSelector } from "redux/hooks";
import useBreakPoint from "hooks/useBreakPoint";
import GiftIcon from "components/Icons/GiftIcon";
import NextIcon from "components/Icons/NextIcon";
import BackIcon from "components/Icons/BackIcon";

export function GiftItemsCard({ isCart = false }: { isCart?: boolean }) {
  const { t } = useTranslation();

  const { voucherId } = useParams();
  const { data: redeemDetails, isLoading } = useGetRedeemDetailsQuery(
    voucherId || "",
    {
      skip: !voucherId,
    },
  );

  const { isRTL } = useAppSelector((state) => state.locale);
  const { isMobile, isTablet } = useBreakPoint();
  const getMenuItemImageStyle = () => {
    if (isMobile) {
      return {
        width: 72,
        height: 72,
      };
    }
    return {
      width: 120,
      height: 120,
    };
  };

  return (
    <>
      <ProInputCard
        title={t("redeem.giftedItems")}
        titleRight={
          <>
            {!isCart && (
              <Tag
                style={{
                  height: 23,
                  textAlign: "center",
                  opacity: 1,
                  paddingRight: 10,
                  paddingLeft: 10,
                  borderRadius: 100,
                  fontWeight: 500,
                  fontStyle: "Medium",
                  fontSize: 12,
                  lineHeight: "140%",
                  letterSpacing: "0%",
                  cursor: "pointer",
                  backgroundColor: "#FFF9E6",
                  color: "#B58D00",
                }}
              >
                {t("redeem.pending")}
              </Tag>
            )}
          </>
        }
      >
        {!isCart && (
          <>
            <div className={styles.orderNotes}>
              <div
                style={{
                  display: "flex",
                  flexDirection: "column",
                  gap: 7,
                  width: "100%",
                }}
              >
                <ProText
                  style={{
                    fontWeight: 500,
                    fontStyle: "Medium",
                    fontSize: 14,
                    lineHeight: "140%",
                    letterSpacing: "0%",
                    color: "#333333",
                  }}
                >
                  {t("redeem.redeemGiftedItems")}
                </ProText>

                <ProText
                  style={{
                    fontWeight: 500,
                    fontStyle: "Medium",
                    fontSize: 12,
                    lineHeight: "140%",
                    letterSpacing: "0%",
                    color: "#777580",
                  }}
                >
                  {t("redeem.includesFreeItemsInThisOrder")}
                </ProText>
              </div>
              <Switch />
            </div>

            <Divider style={{ margin: "16px 0" }} />
          </>
        )}

        {isLoading ? (
          // Skeleton loading state
          <>
            {[1, 2].map((skeletonIndex) => (
              <div key={skeletonIndex} style={{ position: "relative" }}>
                <Space
                  size="middle"
                  style={{
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between",
                    height: "100%",
                  }}
                >
                  <Space orientation="vertical" size="small">
                    <div>
                      <Skeleton.Input
                        active
                        style={{
                          width: isMobile ? 150 : 200,
                          height: 20,
                          marginBottom: 8,
                        }}
                      />
                      <Skeleton.Input
                        active
                        style={{
                          width: isMobile ? 120 : 180,
                          height: 16,
                        }}
                      />
                    </div>
                    <div>
                      <Skeleton.Button
                        active
                        style={{
                          width: isMobile ? 80 : 100,
                          height: 21,
                        }}
                        size="small"
                      />
                    </div>
                  </Space>
                  <div style={{ position: "relative" }}>
                    <Skeleton.Image
                      active
                      style={{
                        width: getMenuItemImageStyle().width,
                        height: getMenuItemImageStyle().height,
                        borderRadius: 8,
                      }}
                    />
                  </div>
                </Space>
                {skeletonIndex !== 3 && (
                  <Divider style={{ margin: "16px 0" }} />
                )}
              </div>
            ))}
          </>
        ) : (
          redeemDetails?.gift?.items?.map((item: any, index: number) => (
            <div key={index} style={{ position: "relative" }}>
              <Space
                size="middle"
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                  height: "100%",
                }}
              >
                <Space orientation="vertical" size="small">
                  <div>
                    <ProText
                      style={{
                        fontWeight: 600,
                        fontStyle: "SemiBold",
                        fontSize: 14,
                        lineHeight: "140%",
                        letterSpacing: "0%",
                        color: "#333333",
                      }}
                    >
                      {item.name}
                      <span
                        style={{
                          fontWeight: 400,
                        }}
                      >
                        {/* {isRTL
                          ? (item.variant as Variant)?.optionsAR?.[0]?.value
                          : (item.variant as Variant)?.options?.[0]?.value} */}
                      </span>
                    </ProText>
                    <br />
                    <ProText
                      className={`${styles.itemDescription} responsive-text`}
                      style={{
                        margin: 0,
                        lineClamp: 1,
                        padding: isMobile ? "3px 0" : isTablet ? 8 : 10,
                        fontSize: isMobile ? 12 : isTablet ? 18 : 20,
                        display: "-webkit-box",
                        WebkitBoxOrient: "vertical",
                        WebkitLineClamp: 1,
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        wordWrap: "break-word",
                        overflowWrap: "break-word",
                        lineHeight: "140%",
                        maxHeight: isMobile ? "3em" : isTablet ? "5em" : "7em",
                        width: "55%",
                        fontWeight: 400,
                        fontStyle: "Regular",
                        letterSpacing: "0%",
                        color: "#777580",
                      }}
                    >
                      {item.name}
                    </ProText>
                  </div>
                  <div>
                    <Button
                      iconPlacement="start"
                      size="small"
                      style={{
                        background: "#F5F5F6",
                        height: 21,
                        border: "none",
                        borderRadius: 888,
                      }}
                    >
                      <GiftIcon />
                      <ProText
                        style={{
                          fontWeight: 500,
                          fontStyle: "Medium",
                          fontSize: 12,
                          lineHeight: "140%",
                          letterSpacing: "0%",
                          textAlign: "right",
                          color: "#7950E6",
                          padding: "2px 8px 2px 0",
                        }}
                      >
                        Gift x {item.qty}
                      </ProText>
                    </Button>
                  </div>
                </Space>
                <div style={{ position: "relative" }}>
                  <ImageWithFallback
                    src={item.image}
                    alt={item.name}
                    className={`${styles.menuItemImage} responsive-image`}
                    {...getMenuItemImageStyle()}
                    fallbackSrc={
                      "https://fascano-space.s3.me-central-1.amazonaws.com/uploads/restorants/685a8fc884a8c_large.jpg"
                    }
                    style={{
                      width: 72,
                      height: 72,
                      borderRadius: 8,
                    }}
                  />
                </div>
              </Space>

              {index !== redeemDetails?.gift?.items?.length - 1 && (
                <Divider style={{ margin: "16px 0" }} />
              )}
            </div>
          )) || null
        )}

        {!isCart && (
          <>
            <Divider style={{ margin: "16px 0" }} />

            <Button
              style={{
                height: 48,
                borderRadius: 888,
                gap: 16,
                opacity: 1,
                borderWidth: 1,
                paddingTop: 8,
                paddingRight: 32,
                paddingBottom: 8,
                paddingLeft: 32,
                width: "100%",
                color: "#4C4A58",
              }}
              icon={
                isRTL ? (
                  <BackIcon className={styles.backIcon} iconColor="#FFC600" />
                ) : (
                  <NextIcon className={styles.nextIcon} iconColor="#FFC600" />
                )
              }
              iconPlacement={isRTL ? "start" : "end"}
            >
              {t("redeem.viewAll")}
            </Button>
          </>
        )}
      </ProInputCard>
    </>
  );
}
