import styles from './styles.module.scss';
import img_empty from "@assets/mail/no_data.png";
import Spring from "@components/Spring";
import styled from 'styled-components/macro';
import React, {useEffect, useState} from "react";
import {useDispatch, useSelector} from "react-redux";
import {getMailList, getMailStatus, readMail} from "@features/mailSlice";
import {SwipeableList, SwipeableListItem, SwipeAction, TrailingActions,Type as ListType} from "react-swipeable-list";
import {ReactComponent as MailIcon} from "@assets/singlesvg/email.svg";
import {ReactComponent as DotMenu} from "@assets/singlesvg/dot_more.svg";
import {formatDate, formatTime} from "@utils/helpers";
import SvgIcon from "@components/SvgIcon";
import img_status_1 from "@assets/mail/mailStatus1.png";
import img_status_2 from "@assets/mail/mailStatus2.png";
import {useNavigate} from "react-router";
import {ROUTE_PATH} from "@constants/routes";
import {reqMailDel, reqMailList} from "@features/api";
import {REQ_STATUS} from "@api/config";
import SmallLoading from "@components/SmallLoading";
import {toast} from "react-toastify";
const imgStatus=[null,img_status_2,img_status_1,img_status_1,img_status_1,img_status_1];
const i18n=global.i18n;
const SwiperItem=styled(SwipeableListItem)`
    position: relative;
    transition: max-height 0.5s ease-in-out;
    max-height: 1000px;
    transform-origin: top;
    overflow: hidden;
    width: 100%;
    margin-bottom:0.5rem;
    scroll-snap-align: start;
    & .swipeable-list-item__content{
        width: 100%;
        align-items: center;
        box-sizing: border-box;
        height: 100%;
        display: flex;
    }
`
const ActionContent = styled.div`
  width:100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  font-weight: 500;
  box-sizing: border-box;
  color: #eee;
  user-select: none;
  background-color:#bc281e;
  font-size:0.8rem;
  & .icon{
    width:2rem;
    height:2rem;
    fill:#eee;
  }
`;
const WMail=({close})=>{
    const list=useSelector(getMailList);
    const [delIndex,setDelIndex]=useState(-1);
    const dispatch =useDispatch();
    const navigate=useNavigate();
    const mailListStatus=useSelector(getMailStatus("MAIL_LIST"));
    useEffect(()=>{
        if (list){
            for (let i = 0; i < list.length; i++) {
                const item = document.querySelector('#listItem-'+i);
                if (item){
                    let open=i===delIndex;
                    const childDivs = item.querySelectorAll('div');
                    for (let i = 0; i <childDivs.length ; i++) {
                        let child=childDivs[i];
                        let classList=child.classList;
                        if (classList.contains("swipeable-list-item__content")){
                            //    swipeable-list-item__content--return
                            if (!classList.contains("swipeable-list-item__content--return")){
                                classList.add("swipeable-list-item__content--return");
                            }
                            // transform: translateX(-50px);
                            child.style.transform=open?"translateX(-50px)":"translateX(-0px)";
                        }
                        if (classList.contains("swipeable-list-item__trailing-actions")){
                            if (!classList.contains("swipeable-list-item__trailing-actions--return")){
                                classList.add("swipeable-list-item__trailing-actions--return");
                            }
                            if (!classList.contains("test-actions-opened")){
                                classList.add("test-actions-opened");
                            }
                            child.style.width=open?"50px":"0px";
                        }
                    }
                }
            }
        }
    },[delIndex]);
    useEffect(()=>{
        dispatch(reqMailList());
    },[])
    const checkLockItem=(item)=>{
        if (item){
            let MailStatus=parseInt(item.MailStatus);
            let strkBonus=item.BonusString;
            if (strkBonus!=null&&strkBonus!==""){
                let blist=strkBonus.split(";");
                let bonus_0=blist[0];
                if (bonus_0!=null&&bonus_0!=""){
                    let arr=bonus_0.split(",");
                    let bonus=Number(arr[1]);
                    if (bonus!=NaN&&bonus>0){
                        if (MailStatus<3)return true;
                    }
                }
            }
        }
        return false;
    }
    const onClickDetail=(mailID)=>{
        dispatch(readMail(mailID));
        navigate(ROUTE_PATH.MESSAGE_DETAIL);
    }
    const onDelItem=(item)=>{
        setDelIndex(-1);
        let locked=checkLockItem(item);
        if (locked){
            toast.warn(i18n.t("mail.TopTip_qxlqyxjl"),{toastId:"mail"});
            return;
        }
        setTimeout(()=>{
            dispatch(reqMailDel(item.MailID))
        },300)
    }
    const onDelAll=()=>{
        let onSure=()=>{
            if (list){
                for (let i = 0; i < list.length; i++) {
                    let item=list[i];
                    let locked=checkLockItem(item);
                    if (locked){
                        toast.warn(i18n.t("mail.TopTip_qxlqyxjl"),{toastId:"mail"});
                        return;
                    }
                }
            }
            dispatch(reqMailDel(0))
        }
        let data={
            content:i18n.t("mail.TopTip_jscsyydyj"),
            sureCB:onSure,
        }
        global.msgBoxShow(data)
    }
    const renderEmpty=()=>{
        return (
            <div className={styles.empty}>
                <img className={styles.empty_img} src={img_empty}/>
            </div>
        )
    }
    const renderTrailing=(item)=>{
        return (
            <TrailingActions>
                <SwipeAction
                    destructive={false}
                    onClick={() =>{
                        onDelItem(item);
                    }}
                >
                    <ActionContent >
                        <SvgIcon className={"icon"} herf={"icon_Delete"}/>
                        {i18n.t("mail.btn_del")}
                    </ActionContent>
                </SwipeAction>
            </TrailingActions>
        )
    }
    const renderItem=(item,index)=>{
        // blockSwipe={delIndex===index}
        let MailStatus=parseInt(item.MailStatus);
        let CreateTime=item.CreateTime;
        if (CreateTime){
            CreateTime=CreateTime.split(".").shift();
        }
        return (
            <SwiperItem key={index} trailingActions={renderTrailing(item)} trailingActionsOpened={delIndex===index}>
                <button className={styles.item} onClick={()=>{
                    // setDelIndex(index);
                    onClickDetail(item.MailID);
                }}>
                    <div className={styles.item_content}>
                        <div className={styles.left_icon_con}>
                            <img className={styles.icon} src={imgStatus[MailStatus]}/>
                        </div>
                        <div className={styles.mail_con}>
                            <div className={styles.title_con}>
                                <div className={styles.title}>{item.TitleString}</div>
                                <div>{CreateTime}</div>
                            </div>
                            <div className={styles.mail_content}>
                                {item.TextString}
                            </div>
                        </div>
                        <div className={styles.right_icon_con}>
                            <button onClick={(event)=>{
                                setDelIndex(index);
                                event.stopPropagation();
                            }}>
                                <DotMenu className={styles.dot_more}/>
                            </button>
                            <SvgIcon className={styles.arrow} herf={"icon_Arrow"}/>
                        </div>
                    </div>
                    <div className={styles.item_line}/>
                </button>
            </SwiperItem>
        )
    }
    const renderMailList=()=>{
        if (list==null)return (<></>);
        return (
            <Spring type="slideUp" className={styles.content}>
                <SwipeableList className={styles.swipe_list} fullSwipe={false} threshold={0.5} type={ListType.IOS}>
                    {
                        list.map((item,index)=>{
                            return (
                                renderItem(item,index)
                            )
                        })
                    }
                </SwipeableList>
                <button className={"button-green"} onClick={()=>{
                    onDelAll();
                }}>
                    {i18n.t("mail.btn_DeleteAll")}
                </button>
            </Spring>
        )
    }
    const renderView=()=>{
        if (mailListStatus===REQ_STATUS.LOADING)return(<SmallLoading></SmallLoading>);
        if (list==null||list.length===0){
            return renderEmpty();
        }
        else
        {
            return renderMailList();
        }
    }
    return (
        <div className={styles.container}>
            {/*{renderEmpty()}*/}
            {/*{renderMailList()}*/}
            {renderView()}
        </div>
    )
}
export default WMail;
