import { CloseOutlined } from '@ant-design/icons';
import { connect, useLocation, useParams } from '@umijs/max';
import { Button, Tabs } from 'antd';
import { useEffect, useState } from 'react';
import MandateDetail from '../components/MandateDetail';
import styles from './index.less';

const TaskModal = (props) => {
  const { projectID } = useParams();
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);

  const mandateIDs =
    queryParams.get('mandate_id')?.split(',').length === 1
      ? queryParams.get('mandate_id')
      : queryParams.get('mandate_id')?.split(',');

  const { userList, dispatch } = props;

  const [modalTitle, setModalTitle] = useState(null);
  const [tabItems, setTabItems] = useState([]);
  const [activeKey, setActiveKey] = useState();

  const onTabChange = (key) => {
    setActiveKey(String(key));
  };

  const closePage = () => {
    // send message to unity close this modal page
  };

  useEffect(() => {
    if (mandateIDs !== undefined) {
      if (Array.isArray(mandateIDs)) {
        setModalTitle(null);
        setTabItems(
          mandateIDs.map((item, index) => {
            return {
              key: String(item),
              label: <span className={styles.fontS24}>任务{index + 1}</span>,
              children: (
                <MandateDetail
                  key={item}
                  mandateID={item}
                  userList={userList}
                  projectID={projectID}
                />
              ),
            };
          }),
        );
      } else {
        setModalTitle(<div className={styles.modalTitle}>任务详情</div>);
      }
    }
  }, []);

  useEffect(() => {
    if (userList.length === 0) {
      dispatch({
        type: 'taskUser/fetchUserList',
        payload: { project_id: projectID },
      });
    }
  }, []);

  return (
    <div className={styles.modalContainer}>
      <Button
        className={styles.closeModalBtn}
        type="text"
        icon={<CloseOutlined style={{ fontSize: '24px' }} />}
        onClick={closePage}
      />
      {mandateIDs && Array.isArray(mandateIDs) ? (
        <Tabs
          defaultActiveKey={String(mandateIDs[0])}
          activeKey={activeKey}
          items={tabItems}
          onChange={onTabChange}
        />
      ) : (
        <>
          {modalTitle}
          <MandateDetail
            mandateID={mandateIDs}
            userList={userList}
            projectID={projectID}
          />
        </>
      )}
    </div>
  );
};

export default connect(({ taskUser }) => {
  return {
    userList: taskUser.userList,
  };
})(TaskModal);