import { HStack, Text, VStack } from "native-base";
import React from "react";
import Svg, { Path } from "react-native-svg";
import Countdown from "../../Countdown";
import SeparatorDashed from "../../SeparatorDashed";

export interface VoucherDetailCardProps {
  labelPromoCode: string;
  valuePromoCode?: string;
  labelValidUntil: string;
  labelEndsIn: string;
  labelMinimumTxn: string;
  valueMinimumTxn: string;
  isBelow24hrLeft: boolean;
  expiredTanggal: string;
  expiredMillis: number;
}

export const VoucherDetailCard: React.FC<VoucherDetailCardProps> = (props) => {
  const {
    labelPromoCode,
    valuePromoCode,
    labelValidUntil,
    labelEndsIn,
    labelMinimumTxn,
    valueMinimumTxn,
    isBelow24hrLeft,
    expiredTanggal,
    expiredMillis,
  } = props;

  return (
    <VStack>
      {/* Top Section */}
      <VStack
        bg="neutral.White"
        roundedTop={"16px"}
        justifyContent={"space-between"}
        alignItems={"center"}
        p={4}
        pb={"11px"}
      >
        <Text fontSize={"xs"} color={"neutral.SecondaryText"}>
          {labelPromoCode}
        </Text>
        <Text fontSize={"lg"} fontWeight={"bold"}>
          {valuePromoCode}
        </Text>
      </VStack>
      {/* Separator Section */}
      <HStack justifyContent={"space-between"} h={"16px"} alignItems={"center"}>
        <Svg width="16" height="16" fill="none" viewBox="0 0 16 16">
          <Path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M16 0H0a8 8 0 1 1 0 16h16V0Z"
            fill="white"
          />
          <Path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M16 16V0H0a8 8 0 1 1 0 16h16Z"
            fill="white"
          />
        </Svg>
        <VStack
          bg={"neutral.White"}
          h={"100%"}
          flex={1}
          justifyContent={"center"}
        >
          <SeparatorDashed />
        </VStack>
        <Svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <Path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M0 0H16C11.5817 0 8 3.58172 8 8C8 12.4183 11.5817 16 16 16H0V0Z"
            fill="white"
          />
          <Path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M0 16V0H16C11.5817 0 8 3.58172 8 8C8 12.4183 11.5817 16 16 16H0Z"
            fill="white"
          />
        </Svg>
      </HStack>
      {/* Action Section */}
      <VStack
        bg="neutral.White"
        roundedBottom={"16px"}
        justifyContent={"space-between"}
        p={4}
        pt={"11px"}
      >
        <HStack justifyContent={"space-between"} alignItems={"center"}>
          <Text
            lineHeight={"24px"}
            fontSize={"xs"}
            color={"neutral.SecondaryText"}
          >
            {isBelow24hrLeft ? labelEndsIn : labelValidUntil}
          </Text>
          {isBelow24hrLeft ? (
            <Countdown time={expiredMillis} />
          ) : (
            <Text fontSize={"xs"} color={"neutral.MainText"}>
              {expiredTanggal}
            </Text>
          )}
        </HStack>
        <HStack justifyContent={"space-between"} alignItems={"center"}>
          <Text
            lineHeight={"24px"}
            fontSize={"xs"}
            color={"neutral.SecondaryText"}
          >
            {labelMinimumTxn}
          </Text>
          <Text fontSize={"xs"} color={"neutral.MainText"}>
            {valueMinimumTxn}
          </Text>
        </HStack>
      </VStack>
    </VStack>
  );
};

export default VoucherDetailCard;