import React from "react"
import { WalletStatementMapping, WalletStatementType } from "../types/WalletStatement";
import Divider from "./Divider";
import { CrossCircleSvg } from "../assets/svg/CrossCircleSvg";
import { AlertCircleSvg } from "../assets/svg/AlertCircleSvg";

interface WalletStatementProps {
    statementDataGrouped: WalletStatementType;
    /** translated "Wallet" label; English fallback used when omitted */
    walletLabel?: string;
}

export const WalletStatement = ({ statementDataGrouped, walletLabel = 'Wallet' }: WalletStatementProps) => {

    return (
        <div className="fr-bg-white fr-p-2">
            {Object.entries(statementDataGrouped).map(([date, statements], index) => {
                return (
                    <article key={index}>
                        <div className='fr-p-2 fr-bg-light fr-text-medium-shade '>
                            {date}
                        </div>
                        {statements?.map((statement: WalletStatementMapping, i) => {
                            const {
                                description,
                                title,
                                status,
                                isFailed,
                                isPending,
                                amount,
                                walletBalance,
                                displayErrorMessage,
                                tripId,
                                onClickDescription
                            } = statement;
                            const paymentStatusCheck = (isPending || isFailed)
                            const walletRounded = Math.round(walletBalance ?? 0);
                            return (
                                <div key={i}>
                                    <div >
                                        <div className="fr-grid fr-grid-cols-12 fr-pt-2" >
                                            <p className={`fr-font-semibold fr-col-span-9 `} >{title} </p>
                                            <p className={`fr-font-medium fr-col-span-3 fr-text-right ${amount < 0 ? 'fr-text-danger' : ''}`}> ₹ {(amount)} </p>
                                        </div>
                                        <div className=" fr-pb-2 fr-grid fr-grid-cols-12  fr-justify-between">
                                            <div className=" fr-col-span-8">
                                                <div className=" fr-flex fr-gap-1" onClick={onClickDescription} >
                                                    <p className='fr-font-regular fr-text-sm fr-text-secondary'>{tripId ? `#${tripId}` : ''}</p>
                                                    <p className='fr-font-regular fr-text-sm'>{description}</p>
                                                </div>
                                                {paymentStatusCheck &&
                                                    <div className="fr-flex fr-items-center fr-gap-1 " >
                                                        {isPending && <AlertCircleSvg />}
                                                        {isFailed && <CrossCircleSvg />}
                                                        <p className={`fr-font-regular  fr-text-sm  fr-justify-start fr-items-center `}>{status}</p>
                                                        {(displayErrorMessage !== null && displayErrorMessage !== undefined) ? <p className="fr-text-sm fr-text-medium fr-ml-2 " >{displayErrorMessage}</p> : null}
                                                    </div>
                                                }
                                            </div>
                                            {(walletBalance !== null && walletBalance !== undefined) ? <p className="fr-text-sm fr-col-span-4 fr-text-medium  fr-text-right" >{walletLabel}: {walletRounded}</p> : null}
                                        </div>

                                    </div>
                                    {i !== statements.length - 1 && <Divider />}
                                </div>
                            );
                        })}
                    </article>
                );
            })}
        </div>
    )
}