import Fade from "@mui/material/Fade";
import { ClickAwayListener } from "@mui/base/ClickAwayListener";
import Grow from "@mui/material/Grow";
import WWheel from "@widgets/WCashWheel/WWheel/WWheel";
import Modal from "@mui/material/Modal";
import styles from "./styles.module.scss";
import WShare from "@widgets/WCashWheel/WShare/WShare";
import React, { useState, useEffect } from "react";
import WRetainPop from "@widgets/WCashWheel/WRetainPop/WRetainPop";
import { localStorageGet, localStorageSet } from "@utils/helpers";
import { LOCAL_WHEEL_RETAIN } from "@constants/localkey";
import { useSelector } from "react-redux";
import { isLogined } from "@features/mainSlice";
import { getTurnplate } from "@features/turnplateSlice";
import SvgIcon from "@components/SvgIcon";
import { useThemeProvider } from "@contexts/themeContext";

const WHallWheel = ({ open, onClose }) => {
    const { setIsShowWheel } = useThemeProvider();
    const [openShare, setOpenShare] = useState(false);
    const [openRetain, setOpenRetain] = useState(false);
    const isLogin = useSelector(isLogined);
    const turnplate = useSelector(getTurnplate);
    const onCheckClose = () => {
        let isclose = true;
        if (isLogin) {
            if (turnplate != null) {
                let collect_amount = turnplate.collect_amount;
                let total_amount = turnplate.total_amount;
                if (collect_amount > 0 && collect_amount < total_amount) {
                    let lsttime = localStorageGet(LOCAL_WHEEL_RETAIN, "0");
                    lsttime = Number(lsttime);
                    let now = Date.now();
                    let dis = now - lsttime;
                    // dis+=86400000;
                    // if (dis>86400000){
                    setOpenRetain(true);
                    isclose = false;
                    // }
                }
            }
        }
        if (isclose) {
            if (onClose) onClose();
        }
    };
    const renderShare = () => {
        return (
            <WShare open={openShare} onClose={() => {
                setOpenShare(false);
            }}></WShare>
        );
    };
    const renderRetainPop = () => {
        return (
            <WRetainPop open={openRetain} onClose={() => {
                setOpenRetain(false);
            }} openShare={openShareBox} closeP={() => {
                localStorageSet(LOCAL_WHEEL_RETAIN, Date.now());
                if (onClose) onClose();
            }}></WRetainPop>
        );
    };
    const openShareBox = () => {
        setOpenShare(true);
    };
    const onWheelClose = () => {
        setIsShowWheel(false);
        setOpenRetain(true);
    };

    useEffect(() => {
        if (!open) return;
        // const latestTurnplate = store.getState().turnplate.turnplate;
        if (turnplate == null || turnplate.times <= 0) {
            setIsShowWheel(false);
            setOpenRetain(true);
        }
    }, [open]);

    // 判断当前hash路由值
    const hash = window.location.hash;
    const isShare = hash.includes("cashwheel");
    return (
        <>
            <Modal open={open} onClose={onCheckClose} closeAfterTransition>
                <Fade in={open} timeout={500}>
                    <div className={styles.container}>
                        {/*<ClickAwayListener onClickAway={onCheckClose}>*/}
                        {/* <ClickAwayListener onClickAway={() => {
                            onCheckClose();
                        }}> */}
                        <Grow in={open} timeout={500}>
                            <div className={styles.content}>
                                {isShare ? <></> : (<button className={styles.close} onClick={onCheckClose} aria-label="Close popup">
                                    <SvgIcon herf={"icon_Close"}></SvgIcon>
                                    {/*<i className="icon-xmark"/>*/}
                                </button>)}
                                <WWheel showShare={false} openShare={openShareBox} onClose={onWheelClose}></WWheel>
                            </div>
                        </Grow>
                        {/* </ClickAwayListener> */}
                    </div>
                </Fade>
            </Modal>
            {renderShare()}
            {renderRetainPop()}
        </>
    );

};
export default WHallWheel;
