import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "../../utils";
import { CircleCheckIcon } from "../../icon";
import { useContext, useEffect, useMemo, useRef, useState } from "react";
import { Input } from "../../input";
import Button from "../../button";
import toast from "react-hot-toast";
import { Poster } from "../poster";
import { OrderlyAppContext } from "../../provider";
import { getPnLPosterData, getPnlInfo, savePnlInfo } from "./sharePnLUtils";
import { CarouselContent, CarouselItem, Dot, useCarousel } from "../../carousel/carousel";
import { Carousel } from "../../carousel";
export const MobileSharePnLContent = (props)=>{
    const localPnlConfig = getPnlInfo();
    const [pnlFormat, setPnlFormat] = useState(localPnlConfig.pnlFormat);
    const [shareOption, setShareOption] = useState(new Set(localPnlConfig.options));
    const [message, setMessage] = useState(localPnlConfig.message);
    const [selectIndex, setSelectIndex] = useState(localPnlConfig.bgIndex);
    const { shareOptions } = useContext(OrderlyAppContext);
    const { backgroundImages, ...resetOptions } = shareOptions.pnl;
    const [domain, setDomain] = useState("");
    const posterRefs = shareOptions.pnl.backgroundImages.map(()=>useRef(null));
    useEffect(()=>{
        const currentDomain = window.location.hostname;
        setDomain(currentDomain);
    }, []);
    const posterData = getPnLPosterData(props.position, props.leverage, message, domain, pnlFormat, shareOption, props.baseDp, props.quoteDp, props.referral);
    // console.log("pster data", posterData, props.position);
    const carouselRef = useRef();
    const aspectRatio = 552 / 310;
    const [scale, setScale] = useState(1);
    const [carouselHeight, setCarouselHeight] = useState(0);
    useEffect(()=>{
        if (carouselRef.current) {
            const divWidth = carouselRef.current.offsetWidth;
            const divHeight = divWidth / aspectRatio;
            setCarouselHeight(divHeight);
            setScale(divWidth / 552);
        }
    }, [
        carouselRef,
        domain
    ]);
    const onSharePnL = async (posterRef)=>{
        if (!posterRef.current) return;
        const data = posterRef.current?.toDataURL();
        const blob = dataURItoBlob(data);
        try {
            // Check if the browser supports the share feature
            if (navigator.share) {
                await navigator.share({
                    // title: "Share PnL",
                    text: message,
                    // url: imageUrl,
                    files: [
                        new File([
                            blob
                        ], "image.png", {
                            type: "image/png"
                        })
                    ]
                });
                ;
            } else {
                ;
            }
            props.hide?.();
        } catch (error) {
            console.error("Error sharing image:", error);
        }
    };
    savePnlInfo(pnlFormat, shareOption, selectIndex, message);
    return /*#__PURE__*/ _jsxs("div", {
        className: "orderly-referral",
        children: [
            /*#__PURE__*/ _jsx("div", {
                ref: carouselRef,
                className: "orderly-w-full orderly-mt-4 orderly-overflow-hidden",
                style: {
                    height: `${carouselHeight + 20}px`
                },
                children: /*#__PURE__*/ _jsxs(Carousel, {
                    className: "orderly-w-full orderly-overflow-hidden",
                    opts: {
                        align: "start"
                    },
                    initIndex: selectIndex,
                    children: [
                        /*#__PURE__*/ _jsx(CarouselContent, {
                            style: {
                                height: `${carouselHeight}px`
                            },
                            children: shareOptions.pnl.backgroundImages.map((item, index)=>/*#__PURE__*/ _jsx(CarouselItem, {
                                    children: /*#__PURE__*/ _jsx(Poster, {
                                        className: "orderly-transform orderly-origin-top-left",
                                        style: {
                                            scale: `${scale}`
                                        },
                                        width: 552,
                                        height: 310,
                                        data: {
                                            backgroundImg: item,
                                            ...resetOptions,
                                            data: posterData
                                        },
                                        ratio: 3,
                                        ref: posterRefs[index]
                                    })
                                }, index))
                        }),
                        /*#__PURE__*/ _jsx("div", {
                            className: "orderly-mt-2 orderly-mb-1 orderly-flex orderly-justify-center",
                            children: /*#__PURE__*/ _jsx(MyIdentifier, {
                                dotClassName: "orderly-w-[16px] orderly-h-[4px] orderly-bg-base-300 orderly-dot-normal",
                                dotActiveClassName: "orderly-bg-primary orderly-w-[20px] orderly-dot-sel",
                                setSelectIndex: setSelectIndex
                            })
                        })
                    ]
                })
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-max-h-[200px] orderly-overflow-y-auto",
                children: [
                    /*#__PURE__*/ _jsxs("div", {
                        className: "orderly-mt-4",
                        children: [
                            /*#__PURE__*/ _jsx("div", {
                                className: "orderly-text-3xs orderly-text-base-contrast-54",
                                children: "PnL display format"
                            }),
                            /*#__PURE__*/ _jsxs("div", {
                                className: "orderly-pt-3 orderly-px-1 orderly-flex orderly-justify-between orderly-gap-3",
                                children: [
                                    /*#__PURE__*/ _jsx(PnlFormatView, {
                                        setPnlFormat: setPnlFormat,
                                        type: "roi_pnl",
                                        curType: pnlFormat
                                    }),
                                    /*#__PURE__*/ _jsx(PnlFormatView, {
                                        setPnlFormat: setPnlFormat,
                                        type: "roi",
                                        curType: pnlFormat
                                    }),
                                    /*#__PURE__*/ _jsx(PnlFormatView, {
                                        setPnlFormat: setPnlFormat,
                                        type: "pnl",
                                        curType: pnlFormat
                                    })
                                ]
                            })
                        ]
                    }),
                    /*#__PURE__*/ _jsxs("div", {
                        className: "orderly-mt-3",
                        children: [
                            /*#__PURE__*/ _jsx("div", {
                                className: "orderly-text-3xs orderly-text-base-contrast-54 orderly-h-[18px]",
                                children: "Optional information to share"
                            }),
                            /*#__PURE__*/ _jsxs("div", {
                                className: "orderly-flex orderly-flex-wrap orderly-gap-3 orderly-mt-3",
                                children: [
                                    /*#__PURE__*/ _jsx(ShareOption, {
                                        setShareOption: setShareOption,
                                        type: "openPrice",
                                        curType: shareOption
                                    }),
                                    /*#__PURE__*/ _jsx(ShareOption, {
                                        setShareOption: setShareOption,
                                        type: "openTime",
                                        curType: shareOption
                                    }),
                                    /*#__PURE__*/ _jsx(ShareOption, {
                                        setShareOption: setShareOption,
                                        type: "leverage",
                                        curType: shareOption
                                    }),
                                    /*#__PURE__*/ _jsx(ShareOption, {
                                        setShareOption: setShareOption,
                                        type: "markPrice",
                                        curType: shareOption
                                    }),
                                    /*#__PURE__*/ _jsx(ShareOption, {
                                        setShareOption: setShareOption,
                                        type: "quantity",
                                        curType: shareOption
                                    })
                                ]
                            })
                        ]
                    }),
                    /*#__PURE__*/ _jsxs("div", {
                        className: "orderly-mt-3 orderly-mb-8",
                        children: [
                            /*#__PURE__*/ _jsx("div", {
                                className: "orderly-text-3xs orderly-text-base-contrast-54 orderly-h-[18px]",
                                children: "Your message"
                            }),
                            /*#__PURE__*/ _jsx("div", {
                                className: "orderly-mt-3 orderly-h-[48px] orderly-bg-base-600 orderly-mx-1",
                                children: /*#__PURE__*/ _jsx(Input, {
                                    placeholder: "Max 25 characters",
                                    containerClassName: "orderly-bg-transparent orderly-h-[48px]",
                                    value: message,
                                    autoFocus: false,
                                    onChange: (e)=>{
                                        if (e.target.value.length > 25) {
                                            toast.error("Maximum support of 25 characters");
                                            return;
                                        }
                                        setMessage(e.target.value);
                                    }
                                })
                            })
                        ]
                    })
                ]
            }),
            /*#__PURE__*/ _jsx("div", {
                className: "orderly-pt-2",
                children: /*#__PURE__*/ _jsx(Button, {
                    fullWidth: true,
                    className: "orderly-h-[40px] orderly-text-[16px]",
                    onClick: ()=>{
                        onSharePnL(posterRefs[selectIndex]);
                    },
                    children: "Share"
                })
            })
        ]
    });
};
const PnlFormatView = (props)=>{
    const { type, curType, setPnlFormat } = props;
    const text = useMemo(()=>{
        switch(type){
            case "roi_pnl":
                return "ROI & PnL";
            case "roi":
                return "ROI";
            case "pnl":
                return "PnL";
        }
    }, [
        type
    ]);
    const isSelected = type === curType;
    return /*#__PURE__*/ _jsx("div", {
        className: cn("orderly-shadow-lg orderly-rounded-lg orderly-h-[46px] orderly-flex-1 orderly-bg-base-400 hover:orderly-cursor-pointer orderly-flex orderly-items-center orderly-px-3 orderly-referral-shadow", isSelected && "orderly-bg-primary orderly-dot-sel"),
        onClick: ()=>{
            setPnlFormat(type);
        },
        children: /*#__PURE__*/ _jsx("div", {
            className: "orderly-text-sm orderly-text-base-contrast",
            children: text
        })
    });
};
const ShareOption = (props)=>{
    const { type, curType, setShareOption } = props;
    const text = useMemo(()=>{
        switch(type){
            case "openPrice":
                return "Open price";
            case "openTime":
                return "Opened at";
            case "markPrice":
                return "Mark price";
            case "quantity":
                return "Quantity";
            case "leverage":
                return "Leverage";
        }
    }, [
        type
    ]);
    const isSelected = curType.has(type);
    return /*#__PURE__*/ _jsxs("div", {
        className: cn("orderly-shadow-lg orderly-rounded-lg orderly-h-[46px] orderly-mt-0 orderly-w-[calc(50%-6px)] orderly-bg-base-400 hover:orderly-cursor-pointer orderly-items-center orderly-flex orderly-p-3 orderly-referral-shadow"),
        onClick: ()=>{
            // setPnlFormat(type);
            setShareOption((value)=>{
                const updateSet = new Set(value);
                if (isSelected) {
                    updateSet.delete(type);
                } else {
                    updateSet.add(type);
                }
                return updateSet;
            });
        },
        children: [
            /*#__PURE__*/ _jsx("div", {
                className: "orderly-text-sm orderly-flex-1 orderly-text-base-contrast",
                children: text
            }),
            isSelected && /*#__PURE__*/ _jsx(CircleCheckIcon, {
                size: 20
            })
        ]
    });
};
function dataURItoBlob(dataURI) {
    const byteString = atob(dataURI.split(",")[1]);
    const mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];
    const ab = new ArrayBuffer(byteString.length);
    const ia = new Uint8Array(ab);
    for(let i = 0; i < byteString.length; i++){
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([
        ab
    ], {
        type: mimeString
    });
}
const MyIdentifier = (props)=>{
    const { scrollSnaps, selectedIndex } = useCarousel();
    useEffect(()=>{
        props.setSelectIndex(selectedIndex);
    }, [
        selectedIndex
    ]);
    return /*#__PURE__*/ _jsx("div", {
        className: cn("orderly-flex orderly-gap-1"),
        children: scrollSnaps.map((_, index)=>{
            return /*#__PURE__*/ _jsx(Dot, {
                index: index,
                active: index === selectedIndex,
                onClick: props.onClick,
                className: props.dotClassName,
                activeClassName: props.dotActiveClassName
            }, index);
        })
    });
};

//# sourceMappingURL=mobileSharePnl.js.map