import { illustrations } from "@flip.id/ui-kit";
import { Button, HStack, Image, Text, VStack } from "native-base";
import React from "react";
import Svg, { Path } from "react-native-svg";
import EnhancedTouchableOpacity from "../../EnhancedTouchableOpacity";
import SeparatorDashed from "../../SeparatorDashed";

export interface VoucherCardProps {
  labelCashback: string;
  valueCashback: string;
  valueCode: string;
  expiredMessage: string;
  labelUse: string;
  onUsePressed: () => void;
  labelDetail: string;
  onDetailPressed: () => void;
  isLoading?: boolean;
}

export const VoucherCard: React.FC<VoucherCardProps> = (props) => {
  const {
    labelCashback,
    valueCashback,
    valueCode,
    expiredMessage,
    labelUse,
    onUsePressed,
    labelDetail,
    onDetailPressed,
    isLoading,
  } = props;

  return (
    <VStack>
      {/* Top Section */}
      <HStack
        bg="neutral.White"
        roundedTop={"16px"}
        justifyContent={"space-between"}
        alignItems={"center"}
        p={4}
        pb={"11px"}
      >
        <VStack>
          <Text>
            {labelCashback} <Text fontWeight={"bold"}>{valueCashback}</Text>{" "}
          </Text>
          <Text fontSize={"xs"} color={"neutral.SecondaryText"}>
            {valueCode}
          </Text>
          <Text fontSize={"xs"} color={"neutral.SecondaryText"}>
            {expiredMessage}
          </Text>
        </VStack>
        <Image height={12} width={12} source={illustrations.icon.cashback} />
      </HStack>
      {/* 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 */}
      <HStack
        bg="neutral.White"
        roundedBottom={"16px"}
        justifyContent={"space-between"}
        alignItems={"center"}
        p={4}
        pt={"11px"}
      >
        <EnhancedTouchableOpacity
          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
          onPress={onDetailPressed}
        >
          <Text fontWeight={"bold"} fontSize={"sm"} color={"flipOrange.Main"}>
            {labelDetail}
          </Text>
        </EnhancedTouchableOpacity>
        <Button onPress={onUsePressed} isLoading={isLoading} size={"xs"}>
          {labelUse}
        </Button>
      </HStack>
    </VStack>
  );
};

export default VoucherCard;