import React, { useMemo } from "react";
import { SelectContent, SelectItem } from "@/components/ui/select";
import { PricePeriodHelpers } from "@/server/modules/payment/types/price-period.enum";
import { PriceCalculator } from "@/server/modules/payment/services/price-calculator";
import { formatPrice } from "@/lib/utils/format-price";

type Props = {
    className?: string;
    price: PriceCalculator.Price;
};

export const TierSelectContent: React.FC<Props> = (props) => {
    const {
        className,
        price: planPrice
    } = props;

    const calculator = useMemo(() => new PriceCalculator(), []);

    const maxUpTo = useMemo(() => {
        return (planPrice?.tiers || []).reduce((max, { up_to }) => {
            return up_to !== null ? Math.max(max, up_to) : max;
        }, 0) + 1;
    }, [planPrice]);

    return (
        <SelectContent className={className}>
            {(planPrice?.tiers || []).map((tier, index) => {
                const limit = tier.up_to || maxUpTo;
                const price = calculator.calc(planPrice, limit) / (limit);

                const formattedPrice = formatPrice(price, {
                    withCurrency: true,
                    withCents: false,
                    currency: planPrice.currency
                });

                return (
                    <SelectItem key={index} value={limit as unknown as string}>
                        {tier.up_to || `${maxUpTo}+`} medarbejder ({formattedPrice} / medarbejder / {PricePeriodHelpers.getShortLabel(planPrice.period)})
                    </SelectItem>
                );
            })}
        </SelectContent>
    );
};