import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CloseIcon } from "../../icon";
import { useContext, useEffect, useMemo, useRef, useState } from "react";
import toast from "react-hot-toast";
import { Divider } from "../../divider";
import { Poster } from "../poster";
import { OrderlyAppContext } from "../../provider";
import { getPnLPosterData, getPnlInfo, savePnlInfo } from "./sharePnLUtils";
import { CarouselBackgroundImage } from "./desktop/carousel";
import { PnlFormatView } from "./desktop/pnlFormat";
import { ShareOption } from "./desktop/options";
import { BottomButtons } from "./desktop/bottomBtns";
import { Message } from "./desktop/message";
export const DesktopSharePnLContent = (props)=>{
    const localPnlConfig = getPnlInfo();
    const [pnlFormat, setPnlFormat] = useState(localPnlConfig.pnlFormat);
    const [shareOption, setShareOption] = useState(new Set(localPnlConfig.options));
    const [selectedSnap, setSelectedSnap] = useState(localPnlConfig.bgIndex);
    const [message, setMessage] = useState(localPnlConfig.message);
    const [check, setCheck] = useState(false);
    const { shareOptions } = useContext(OrderlyAppContext);
    const { backgroundImages, ...resetOptions } = shareOptions.pnl;
    const [domain, setDomain] = useState("");
    const posterRef = useRef(null);
    useEffect(()=>{
        const currentDomain = window.location.hostname;
        setDomain(currentDomain);
    }, []);
    const curBgImg = useMemo(()=>{
        return shareOptions.pnl.backgroundImages[selectedSnap];
    }, [
        shareOptions.pnl.backgroundImages,
        selectedSnap
    ]);
    const posterData = getPnLPosterData(props.position, props.leverage, check ? message : "", domain, pnlFormat, shareOption, props.baseDp, props.quoteDp);
    const onCopy = ()=>{
        posterRef.current?.copy().then(()=>{
            props.hide?.();
            toast.success("Image copied");
        }).catch((e)=>{
            toast.error(()=>{
                return /*#__PURE__*/ _jsxs("div", {
                    children: [
                        /*#__PURE__*/ _jsx("div", {
                            children: "Copy failed"
                        }),
                        /*#__PURE__*/ _jsx("div", {
                            className: "orderly-text-2xs orderly-max-w-[396px] orderly-mt-2 orderly-text-base-contrast-54",
                            children: "Browser version outdated, please update in order to copy image to clipboard."
                        })
                    ]
                });
            });
        });
    };
    const onDownload = ()=>{
        posterRef.current?.download("Poster.png");
        props.hide?.();
    };
    const formats = [
        "roi_pnl",
        "roi",
        "pnl"
    ];
    const options = [
        "openPrice",
        "markPrice",
        "openTime",
        "leverage",
        "quantity"
    ];
    savePnlInfo(pnlFormat, shareOption, selectedSnap, message);
    return /*#__PURE__*/ _jsxs("div", {
        className: "orderly-h-full orderly-flex orderly-flex-col orderly-relative orderly-referral",
        children: [
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-flex-1 orderly-h-full orderly-overflow-y-auto",
                children: [
                    /*#__PURE__*/ _jsxs("div", {
                        className: "orderly-h-[422px] orderly-mt-[36px]",
                        children: [
                            /*#__PURE__*/ _jsx(Poster, {
                                className: "orderly-mx-11",
                                width: 552,
                                height: 310,
                                data: {
                                    backgroundImg: curBgImg,
                                    ...resetOptions,
                                    data: posterData
                                },
                                ref: posterRef
                            }),
                            /*#__PURE__*/ _jsx(CarouselBackgroundImage, {
                                backgroundImages: shareOptions.pnl.backgroundImages,
                                selectedSnap: selectedSnap,
                                setSelectedSnap: setSelectedSnap
                            })
                        ]
                    }),
                    /*#__PURE__*/ _jsxs("div", {
                        className: "orderly-px-10",
                        children: [
                            /*#__PURE__*/ _jsxs("div", {
                                className: "orderly-mt-4",
                                children: [
                                    /*#__PURE__*/ _jsx("div", {
                                        className: "orderly-text-lg orderly-h-[26px]",
                                        children: "PnL display format"
                                    }),
                                    /*#__PURE__*/ _jsx("div", {
                                        className: "orderly-pt-4 orderly-flex orderly-justify-start orderly-gap-3",
                                        children: formats.map((e)=>/*#__PURE__*/ _jsx(PnlFormatView, {
                                                setPnlFormat: setPnlFormat,
                                                type: e,
                                                curType: pnlFormat
                                            }))
                                    })
                                ]
                            }),
                            /*#__PURE__*/ _jsx(Divider, {
                                className: "orderly-pt-6 orderly-border-white/10"
                            }),
                            /*#__PURE__*/ _jsxs("div", {
                                className: "orderly-mt-4",
                                children: [
                                    /*#__PURE__*/ _jsx("div", {
                                        className: "orderly-text-lg orderly-h-[26px]",
                                        children: "Optional information to share"
                                    }),
                                    /*#__PURE__*/ _jsx("div", {
                                        className: "orderly-mt-4 orderly-flex orderly-justify-start orderly-gap-4",
                                        children: options.map((item)=>/*#__PURE__*/ _jsx(ShareOption, {
                                                setShareOption: setShareOption,
                                                type: item,
                                                curType: shareOption
                                            }))
                                    })
                                ]
                            }),
                            /*#__PURE__*/ _jsx(Message, {
                                message: message,
                                setMessage: setMessage,
                                check: check,
                                setCheck: setCheck
                            })
                        ]
                    })
                ]
            }),
            /*#__PURE__*/ _jsx(BottomButtons, {
                onClickCopy: onCopy,
                onClickDownload: onDownload
            }),
            /*#__PURE__*/ _jsx("button", {
                onClick: ()=>{
                    props.hide();
                },
                className: "orderly-absolute orderly-top-0 orderly-right-0 orderly-w-[40px] orderly-h-[40px] orderly-flex orderly-justify-center orderly-items-center",
                children: /*#__PURE__*/ _jsx(CloseIcon, {
                    size: 12,
                    className: "orderly-fill-base-contrast-54"
                })
            })
        ]
    });
};

//# sourceMappingURL=desktopSharePnl.js.map