"use client";
import { Controls, Elements, Layouts } from "../../../components";
import { useSort } from "../../../hooks";
import { filter, format } from "../../../lib/utils";
export default function Asset(props) {
    const { sorting, setSort, sortArrow } = useSort();
    const sorts = {
        symbol: { key: "symbol", type: "string" },
        name: { key: "name", type: "string" },
        balance: { key: "balance", type: "number" },
        value: { key: "value", type: "number" },
    };
    const formatter = (data) => {
        return (typeof data !== "string" &&
            data?.length > 0 &&
            data?.map((data, i) => ({
                children: [
                    [
                        {
                            style: { width: "max-content" },
                            children: [
                                <>
                                    <Elements.Avatar 
                                // length={8}
                                size={3} img={data?.logo}/>
                                </>,
                                [
                                    <>
                                        <Elements.Text type="strong" case={"upper"} height={1}>
                                            {data?.symbol}
                                        </Elements.Text>
                                    </>,
                                    <>
                                        <Elements.Text type="p" height={1} opacity={0.45}>
                                            {data?.name}
                                        </Elements.Text>
                                    </>,
                                ],
                            ],
                        },
                    ],
                    {
                        align: "right",
                        children: [
                            <>
                                <Elements.Text type="strong">{data?.balance}</Elements.Text>
                            </>,
                            <>
                                <Elements.Text type="p" opacity={0.45}>
                                    ${" "}
                                    {format(parseFloat(format(data?.balance, "number")) * parseFloat(format(data?.value, "number")), "currency", {
                                    unit: 9,
                                    limit: 12,
                                    fix: 3,
                                })}
                                    {/* {data?.using} */}
                                </Elements.Text>
                            </>,
                        ],
                    },
                    // [
                    //     {
                    //         align: "right",
                    //         children: (
                    //             <Elements.Text>
                    //                 $ {format((format(data?.balance, "number") as number) * (format(data?.value, "number") as number), "currency", { unit: 9, limit: 12, fix: 3 })}
                    //             </Elements.Text>
                    //         ),
                    //     },
                    // ],
                ],
                onClick: (props) => alert(props.children),
            })));
    };
    return (<>
            <Layouts.Row gap={1} style={{ padding: "1em" }} fix>
                <Layouts.Row gap={0} fix>
                    <Controls.Tab iconLeft={sortArrow(sorts.symbol)} onClick={() => setSort(sorts.symbol)}>
                        Symbol
                    </Controls.Tab>
                    <Controls.Tab iconLeft={sortArrow(sorts.name)} onClick={() => setSort(sorts.name)}>
                        Name
                    </Controls.Tab>
                </Layouts.Row>
                <Layouts.Row gap={0} fix>
                    <Controls.Tab iconLeft={sortArrow(sorts.balance)} onClick={() => setSort(sorts.balance)}>
                        Balance
                    </Controls.Tab>
                    <Controls.Tab iconLeft={sortArrow(sorts.value)} onClick={() => setSort(sorts.value)}>
                        Value
                    </Controls.Tab>
                </Layouts.Row>
                {/* <Layouts.Row gap={0} fix>
            <Controls.Tab iconLeft={sortArrow(sorts.value)} onClick={() => setSort(sorts.value)}>
                Value
            </Controls.Tab>
        </Layouts.Row> */}
            </Layouts.Row>
            <Layouts.Divider strong/>
            <Layouts.Table list={[
            {
                style: { height: "6.5em" },
                onClick: () => { },
                children: [
                    {
                        children: <Elements.Text type={"strong"}>Total of all your assets</Elements.Text>,
                    },
                    {
                        align: "right",
                        children: <Elements.Text align={"right"}>$ {format(123456789, "currency", { unit: 9, limit: 12, fix: 3 })}</Elements.Text>,
                    },
                ],
            },
        ]} fallback="There is no data."/>
            <Layouts.Divider strong/>
            <Layouts.Contents.InnerContent scroll>
                <Layouts.Table list={filter(sorting(props?.list), props?.filter)} formatter={formatter} fallback="There is no data."/>
            </Layouts.Contents.InnerContent>
        </>);
}
//# sourceMappingURL=Asset.jsx.map