import { memo, useMemo } from "react";
import { CurrencyConversion } from "@/components/datatable/listcurrencyconversion/columns";
import { RecordModal, formatDisplay, formatNumeric } from "@/components/cash/RecordModal";

interface CurrencyConversionModalProps {
  record: CurrencyConversion;
  onClose: () => void;
  onEdit: () => void;
}

export const CurrencyConversionModal = memo(({
  record,
  onClose,
  onEdit,
}: CurrencyConversionModalProps) => {
  const subtitle = useMemo(
    () => `${formatDisplay(record.purchase_currency_code)} ⇄ ${formatDisplay(record.sold)}`,
    [record.purchase_currency_code, record.sold]
  );

  const metrics = useMemo(
    () => [
      {
        label: "Amount (Base Currency)",
        value: formatNumeric(record.price),
      },
      {
        label: "Conversion Rate",
        value: formatNumeric(record.quantity),
      },
      {
        label: "Placement Date",
        value: formatDisplay(record.t_date),
      },
    ],
    [record.price, record.quantity, record.t_date]
  );

  const detailItems = useMemo(
    () => [
      { label: "Placement Date", value: formatDisplay(record.t_date) },
      { label: "Bank", value: formatDisplay(record.bank_id) },
      { label: "Conversion Rate", value: formatNumeric(record.quantity) },
      { label: "Currency Bought", value: formatDisplay(record.purchase_currency_code) },
      { label: "Currency Sold", value: formatDisplay(record.sold) },
    ],
    [record.t_date, record.bank_id, record.quantity, record.purchase_currency_code, record.sold]
  );

  return (
    <RecordModal
      record={record}
      onClose={onClose}
      onEdit={onEdit}
      title="Currency conversion overview"
      subtitle={subtitle}
      metrics={metrics}
      detailItems={detailItems}
    />
  );
});

CurrencyConversionModal.displayName = "CurrencyConversionModal";