import { Row, Col } from 'antd';
import React, { useState, useCallback, useRef, useEffect } from 'react';
import Loading from '../../util/Loading';
import { getJobCate } from '../../data/getJobCate';
import Modal from '../../util/Modal';
import { CenterBtnGrp, OkBtn, CancelBtn } from '../../util/GeneralButton';
import FatherNav from './selectWidget/FatherNav';
import SonArea from './selectWidget/SonArea';


//visible, setValue, onCancel
export default ({ setValue, ...props }) => {
    const [isloaded, setLoaded] = useState(false);
    const dataRef = useRef(null);
    useEffect(() => {
        const f = async () => {
            const map = await getJobCate();
            //const map = mock;
            dataRef.current = map;
            setLoaded(true);
        }
        f();
        return () => { setLoaded(false); };
    }, []);
    const [selectedCate, setCate] = useState(null);
    const [selectedJob, setJob] = useState(null);
    const selectCate = useCallback(text => {
        if (text === selectedCate) {
            return;
        }
        setCate(text);
        setJob(null);
    }, []);
    const selectJob = useCallback(text => {
        if (text === selectedJob) {
            return;
        }
        setJob(text);
    }, []);
    const onOk = useCallback(() => {
        if (selectedJob === null) {
            return;
        }
        props.onCancel();
        setValue({ father: selectedCate, son: selectedJob });
    }, [selectedCate, selectedJob]);
    const Content = <Row style={{ height: "572px" }}>
        <Col span={6} style={{ height: "100%" }}>
            <FatherNav data={dataRef.current} selectCate={selectCate} selectedCate={selectedCate}></FatherNav>
        </Col>
        <Col span={18} style={{ height: "100%" }}>
            <div style={{ height: "490px" }}>
                <SonArea data={selectedCate ? dataRef.current.get(selectedCate) : new Set()}
                    selectedJob={selectedJob}
                    selectJob={selectJob} />
            </div>
            <CenterBtnGrp>
                <CancelBtn onClick={props.onCancel} />
                <OkBtn onClick={onOk} />
            </CenterBtnGrp>
        </Col>
    </Row>;
    return <Modal title="选择职位类别" width="846px" {...props} getContainer={false}>
        {!isloaded ? <Loading /> : Content}
    </Modal>;
};