import React, { Fragment, useEffect, useState } from 'react';
import ScreenList from './ScreenList';
import ScreenOperate from './ScreenOperate';
import { selectGroup } from 'models/group';
import { connect } from 'react-redux';
import { getData, read } from 'models/announcement';
import AlertScroll from 'components/AlertScroll';
import TransferScroll from 'containers/TransferScroll';
import { getCourse } from 'models/course';
import orderBy from 'lodash/orderBy';
import { CloseCircleFilled } from '@easyv/react-icons';

function Screens({ selectGroup, getCourse,getAnnData, read, annData, screenList, spaceSize, deadline }) {
  const [isOverScreen, setIsOverScreen] = useState(false);
  useEffect(() => {
    const screenLength = screenList.filter((d) => !d.deletedAt).length;
    setIsOverScreen(screenLength > spaceSize);
  }, [screenList]);

  useEffect(() => {
    if (!window.appConfig.LOCAL) {
      getAnnData();
      getCourse(); // 全局教程
    }
  }, []);

  const onClose = () => {
    read();
  };

  return (
    <Fragment>
      {deadline ? (
        <TransferScroll />
      ) : isOverScreen ? (
        <AlertScroll icon={<CloseCircleFilled />} closable={true} data="您的应用数已超出上限，请删除部分应用后再进行应用操作" />
      ) : (
        !window.appConfig.LOCAL && annData && <AlertScroll onClose={onClose} data={annData.content} theme="info" closable={true} />
      )}
      <ScreenOperate />
      <ScreenList />
    </Fragment>
  );
}
const mapStateToProps = ({ annData, screens, space, transfer }) => {
  const data = orderBy(
    annData.data?.filter((e) => e.published),
    'updatedAt',
    'desc'
  );
  return {
    annData: data?.length ? data[0] : null,
    deadline: transfer.deadline,
    spaceSize: space.active?.size || 0,
    screenList: screens.list
  };
};

const mapDispatchToProps = {
  selectGroup,
  getAnnData: getData,
  read,
  getCourse
};

export default connect(mapStateToProps, mapDispatchToProps)(Screens);
