import React from "react";
import { Typography } from "@mui/material";

const CURRENCIES = ["INR", "USD", "EUR", "GBP", "AED", "SGD"];
const _currencyFormatters = new Map<string, Intl.NumberFormat>();

export function formatCurrency(amount: number, currency?: string): string {
  const code = currency && CURRENCIES.includes(currency) ? currency : "INR";
  let formatter = _currencyFormatters.get(code);
  if (!formatter) {
    formatter = new Intl.NumberFormat("en-IN", {
      style: "currency",
      currency: code,
      maximumFractionDigits: 2,
    });
    _currencyFormatters.set(code, formatter);
  }
  return formatter.format(Math.abs(amount));
}

interface CurrencyFieldProps {
  value: number;
  currency?: string;
  large?: boolean;
}

export function CurrencyField({ value, currency, large }: CurrencyFieldProps) {
  const negative = value < 0;
  return (
    <Typography
      component="span"
      sx={{
        fontWeight: 700,
        fontSize: large ? "0.9375rem" : "0.8125rem",
        fontVariantNumeric: "tabular-nums",
        color: negative ? "error.main" : "success.main",
      }}
    >
      {formatCurrency(value, currency)}
    </Typography>
  );
}