import React, { useCallback, useState,useEffect } from "react";
import { Row, Col, message } from "antd";
import Modal from "../../util/Modal";
import Nav from "./jobClass/FatherNav";
import SonNav from "./jobClass/SonArea";
import Tiltle from "./jobClass/Tiltle";
import Loading from "../../util/Loading";
import { useLoaded, useSet } from "../../util/hooks";
import { CenterBtnGrp, OkBtn, CancelBtn } from "../../util/GeneralButton";
import { getJobCate } from "../../data/getJobCate";

//visible, setValue, onCancel
export default ({ setValue, initArr, ...props }) => {
  const { isLoaded, data } = useLoaded(getJobCate, []);
  const { set, add, remove } = useSet((s) => {
    if (s.size >= 5) {
      message.error("最多选择5项");
      return false;
    }
    return true;
  });
  const [selectedCate, selectCate] = useState(null);
  const onOk = useCallback(() => {
    props.onCancel();
    setValue(Array.from(set.values()));
  }, []);
  useEffect(() => {
    if (Array.isArray(initArr)) {
      initArr.forEach((i) => add(i));
    }
  }, []);
  const content = !isLoaded ? (
    <Loading />
  ) : (
    <React.Fragment>
      <Row style={{ height: "572px" }}>
        <Col span={6} style={{ height: "100%" }}>
          <Nav
            data={data}
            selectCate={selectCate}
            selectedCate={selectedCate}
          ></Nav>
        </Col>
        <Col span={18} style={{ height: "100%" }}>
          <div style={{ height: "490px" }}>
            <SonNav
              data={selectedCate ? data.get(selectedCate) : new Set()}
              select={add}
            ></SonNav>
          </div>
          <CenterBtnGrp>
            <CancelBtn onClick={props.onCancel} />
            <OkBtn onClick={onOk} />
          </CenterBtnGrp>
        </Col>
      </Row>
    </React.Fragment>
  );
  return (
    <Modal
      width="850px"
      title={<Tiltle selected={set} remove={remove} />}
      {...props} getContainer={false}
    >
      {content}
    </Modal>
  );
};
