import type {
  CoreBookingUnitCharge,
  CorePaymentTransactions,
} from "@/lib/features/bookings/types";
import { Divider, Flex, Image, Text } from "@mantine/core";
import { IconFileDescription } from "@tabler/icons-react";

const Summary: React.FC<{
  payment?: CorePaymentTransactions;
  charges: CoreBookingUnitCharge[];
}> = ({ charges, payment }) => {
  const totalPoints = charges
    .filter((c) => c.type === "POINTS")
    .reduce((sum, c) => sum + c.value, 0);
  return (
    <Flex
      direction={"column"}
      gap={22}
      px={23}
      py={20}
      bg={"blue.12"}
      style={{ borderRadius: "4px" }}
    >
      <Flex gap={4} align={"center"}>
        <IconFileDescription size={18} />
        <Text fz={14} fw={600}>
          Summary
        </Text>
      </Flex>
      <Flex direction={"column"} gap={18}>
        <Divider w={"100%"} />
        <Flex direction={"column"}>
          {payment && (
            <Flex justify={"space-between"} align={"center"}>
              <Text fz={14} fw={500}>
                Sub Total
              </Text>
              <Text fz={14} fw={500}>
                {payment.currency} {payment.total_amount}
              </Text>
            </Flex>
          )}
          {charges?.map((charge) => (
            <Flex
              c={"blue.17"}
              key={charge.id}
              justify={"space-between"}
              align={"center"}
              mt={10}
            >
              <Text fz={12} fw={500}>
                {charge.name}
              </Text>
              <Text fz={12} fw={500}>
                {charge.type === "POINTS" ? (
                  <Image
                    src={"/entitlement.svg"}
                    alt="Points"
                    w={18}
                    style={{ display: "inline" }}
                  />
                ) : charge.type === "GUEST_CERTIFICATE_FEE" ? (
                  charge?.currency
                ) : charge.type === "ADDITIONAL_CHARGE" ? (
                  charge.currency
                ) : (
                  ""
                )}{" "}
                {charge.value}
              </Text>
            </Flex>
          ))}
          <Flex justify={"space-between"} align={"center"} mt={18}>
            <Text fz={16} fw={600}>
              Points Sub Total
            </Text>
            <Flex align={"center"} gap={2}>
              <Image src={"/entitlement.svg"} alt="Points" w={18} h={12} />
              <Text fz={16} fw={600}>
                {totalPoints}
              </Text>
            </Flex>
          </Flex>
        </Flex>
        <Divider w={"100%"} />
        {payment && (
          <Flex justify={"space-between"} align={"start"}>
            <Text fz={16} fw={600}>
              Total Amount
            </Text>
            <Flex justify={"end"} direction={"column"}>
              <Text fz={16} fw={600}>
                {payment.currency} {payment.total_amount}
              </Text>
              <Flex align={"center"} gap={3} justify={"end"}>
                <Text fz={16} fw={600}>
                  +
                </Text>
                <Image src={"/entitlement.svg"} alt="Points" w={18} h={12} />
                <Text fz={16} fw={600}>
                  {totalPoints}
                </Text>
              </Flex>
            </Flex>
          </Flex>
        )}
      </Flex>
    </Flex>
  );
};

export default Summary;