import styles from "./styles.module.scss";
import Spring from "@components/Spring";
import {ReactComponent as WSIcon} from '@assets/singlesvg/whatsapp.svg';
import {ReactComponent as TGIcon} from '@assets/singlesvg/telegram.svg';
import {ReactComponent as EamilIcon} from '@assets/singlesvg/email-open.svg';
import SvgIcon from "@components/SvgIcon";
import {useDispatch, useSelector} from "react-redux";
import {
    getCustomInfo,
    getCustomServiceStatus,
    getCustomStatus,
    getCustomTypeInfo,
    getUserInfo
} from "@features/mainSlice";
import {toast} from "react-toastify";
import {CopyToClipboard} from "react-copy-to-clipboard";
import {APP_CHANNEL} from "@constants/app";
import SmallLoading from "@components/SmallLoading";
import {useEffect, useState} from "react";
import {REQ_STATUS} from "@api/config";
import {reqCustomLeaveMsg, reqCustomService} from "@features/api";
const i18n=global.i18n;
const WCustomerService=({close})=>{
    const whatsInfo=useSelector(getCustomTypeInfo("WhatsApp"));
    const emailInfo=useSelector(getCustomTypeInfo("Email"));
    const tgInfo=useSelector(getCustomTypeInfo("Telegram"));
    const user=useSelector(getUserInfo);
    const gameID=user?user.GameID:"";
    const status=useSelector(getCustomStatus);
    const dispatch=useDispatch();
    const [leaveMsg,setLeaveMsg]=useState("");
    const config=useSelector(getCustomInfo);
    const configStatus=useSelector(getCustomServiceStatus);
    useEffect(()=>{
        if (config==null||config.length===0){
            dispatch(reqCustomService())
        }
    },[])
    const onClickWS=()=>{
        if (whatsInfo){
            let url=whatsInfo.StatusString+"&gameid="+gameID;
            window.open(url,"_blank");
        }
    }
    const onClickTG=()=>{
        if (tgInfo) {
            window.open(tgInfo.StatusString,"_blank");
        }
    }
    const onClickEmail=(email)=>{
        // cc.sys.openURL("mailto:"+BaseDefine.CS_EMAIL+"?subject=Mexico "+cc.vv.config.AppId+" gameid:"+cc.vv.globalUserInfo.getGameID()+"&body=problem:");
        let url="mailto:"+email+"?subject=Mexico "+APP_CHANNEL.Channel+" gameid:"+gameID+"&body=problem:";
        window.open(url,"_blank");
    }
    const onSubmitCB=(data)=>{
        setLeaveMsg("");
    }
    const onSubmit=()=>{
        if (leaveMsg==="")return;
        if (status===REQ_STATUS.LOADING)return;
        let data={
            message:encodeURI(leaveMsg),
            GameID:gameID,
            PackageName:APP_CHANNEL.PackageName
        }
        data.callback=onSubmitCB;
        dispatch(reqCustomLeaveMsg(data));
    }
    const renderTips=()=>{
        return (
            <div className={styles.tips}>
                {i18n.t("customer.TipLabel")}
            </div>
        )
    }
    const renderCustomBtns=()=>{
        return (
            <div className={styles.block}>
                <div className={styles.title}>
                    {i18n.t("customer.Item_customer_Label")}
                </div>
                <div className={styles.line}></div>
                <div className={styles.item}>
                    <button className={`${styles.btn_base} ${styles.ws_btn}`} onClick={onClickWS}>
                        <WSIcon className={styles.icon}></WSIcon>
                        {i18n.t("customer.WhatsApp_btn_WhastApp")}
                    </button>
                    <button className={`${styles.btn_base} ${styles.tg_btn}`} onClick={onClickTG}>
                        <TGIcon className={styles.icon}></TGIcon>
                        {i18n.t("customer.btn_telegram")}
                    </button>
                </div>
            </div>
        )
    }
    const renderWhatsApp=()=>{
        let id="";
        if (whatsInfo){
            let StatusValue=whatsInfo.StatusValue;
            if (StatusValue)id=StatusValue.replace("ID:","");
        }
        return(
            <div className={styles.block}>
                <div className={styles.title}>
                    {i18n.t("customer.whats_label")}
                </div>
                <div className={styles.line}></div>
                <div className={styles.item}>
                    <div className={"d-flex g-6"}>
                        <div className={styles.title}>ID:</div>
                        <div className={styles.text}>{id}</div>
                    </div>
                    <CopyToClipboard text={id} onCopy={()=>{
                        toast.success(i18n.t("copy_success"),{toastId:"copy_success"});
                    }}>
                        <button className={`${styles.btn_base} ${styles.copy_btn}`}>
                            <SvgIcon className={styles.icon} herf={"icon_Copy"}/>
                            {i18n.t("customer.copy",{toastId:"copy_success"})}
                        </button>
                    </CopyToClipboard>
                </div>
            </div>
        )
    }
    const renderEmail=()=>{
        let email="";
        if (emailInfo){
            let StatusString=emailInfo.StatusString;
            if (StatusString){
                email=StatusString;
            }
        }
        return(
            <div className={styles.block}>
                <div className={styles.title}>
                    {i18n.t("customer.email_label")}
                </div>
                <div className={styles.line}></div>
                <div className={styles.item}>
                    <div className={"d-flex g-6"}>
                        <div className={styles.title}>Email:</div>
                        <div className={styles.text}>{email}</div>
                    </div>
                    <CopyToClipboard text={email} onCopy={()=>{
                        toast.success(i18n.t("copy_success"),{toastId:"copy_success"});
                    }}>
                        <button className={`${styles.btn_base} ${styles.copy_btn}`}>
                            <SvgIcon className={styles.icon} herf={"icon_Copy"}/>
                            {i18n.t("customer.copy")}
                        </button>
                    </CopyToClipboard>
                </div>
                <div className={styles.item}>
                    <button className={`${styles.btn_base} ${styles.write_btn}`} onClick={()=>{
                        onClickEmail(email);
                    }}>
                        <EamilIcon className={styles.icon}/>
                        {i18n.t("customer.write_now")}
                    </button>
                </div>
            </div>
        )
    }
    const renderReport=()=>{
        return(
            <div className={styles.block}>
                <div className={styles.title}>
                    {i18n.t("customer.Input_tip_Label")}
                </div>
                <div className={styles.line}></div>
                <div className={styles.report_con}>
                    <textarea value={leaveMsg} rows={7} maxLength={300} placeholder={i18n.t("customer.input_holder")} onChange={(e)=>{
                        setLeaveMsg(e.target.value);
                    }}/>
                </div>
                <button className={"button-green"} onClick={onSubmit}>
                    {
                        status===REQ_STATUS.LOADING?(<SmallLoading fill={"#fff"} />):(<>{i18n.t("customer.Btn_send")}</>)
                    }
                </button>
            </div>
        )
    }
    return (
        <div className={styles.container}>
            {
                configStatus===REQ_STATUS.LOADING?<SmallLoading></SmallLoading>:(
                    <Spring type={"slideUp"} className={styles.content}>
                        {renderTips()}
                        {renderCustomBtns()}
                        {renderWhatsApp()}
                        {renderEmail()}
                        {renderReport()}
                    </Spring>
                )
            }
        </div>
    )
}
export default WCustomerService;
