import {useEffect, useState} from "react";
import styles from "./styles.module.scss";
import Fade from "@mui/material/Fade";
import Grow from "@mui/material/Grow";
import Modal from "@mui/material/Modal";
import {useSelector} from "react-redux";
import {getArea} from "@features/mainSlice";
import areaData from "@db/area";
import RadioBtn from "@components/RadioBtn";
const i18n=global.i18n;

const WAreaSelect = ({})=>{
    const [isShow, setIsShow] = useState(false);
    const area=useSelector(getArea);
    const [currArea,setCurrArea]=useState(1);
    const show=()=>{
        setIsShow(true);
    }
    const hide=()=>{
        setIsShow(false);
    }
    useEffect(()=>{
        const areaSelect={
            show,
            hide
        };
        global.areaSelect=areaSelect;
        return ()=>{
        }
    },[])
    useEffect(()=>{
        setCurrArea(area);
    },[area])
    const getAllData=()=>{
        let list=[];
        list=areaData.slice(0);
        for (let i = 0; i < list.length; i++) {
            let item=list[i];
            if (item.id===area){
                list.splice(i,1);
                list.unshift(item);
                break;
            }
        }
        return list;
    }
    const onChangeArea=(value)=>{
        setCurrArea(value);
    }
    const renderHeader=()=>{
        return (
            <>
                <div className={styles.header}>
                    {i18n.t("areaSelect.title")}
                </div>
                <div className={styles.line}/>
            </>
        )
    }
    const renderContent=()=>{
        let list=getAllData();
        return (
            <div className={styles.content}>
                {
                    list.map((item,index)=>{
                        return (
                            <button onClick={()=>{
                                onChangeArea(item.id);
                            }} className={`${styles.item} ${currArea===item.id?styles.active:''}`} key={index}>
                                <div className={styles.left}>
                                    <img className={styles.icon} src={item.icon}/>
                                    {i18n.t(item.name)}
                                </div>
                                <RadioBtn selected={currArea===item.id} value={item.id} onChange={(value)=>{
                                    onChangeArea(item.id);
                                }} />
                            </button>
                        )
                    })
                }
            </div>
        )
    }
    const renderConfirm=()=>{
        return (
            <button className={"button-green"} onClick={()=>{

            }}>
                {i18n.t("areaSelect.btn_confirm")}
            </button>
        )
    }
    return (
        <Modal open={isShow} onClose={()=>{
            hide();
        }} closeAfterTransition>
            <Fade in={isShow} timeout={500}>
                <div className="popup-container">
                    <Grow in={isShow} timeout={500}>
                        <div className={`popup card card-padded`} style={{minHeight: 'unset'}}>
                            <button className="popup_close" onClick={()=>{
                                hide();
                            }} aria-label="Close popup">
                                <i className="icon-xmark"/>
                            </button>
                            <div className={styles.container}>
                                {renderHeader()}
                                {renderContent()}
                                {renderConfirm()}
                            </div>
                        </div>
                    </Grow>
                </div>
            </Fade>
        </Modal>
    )
}
export default WAreaSelect;