import Brief from '@/components/Brief';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import { Card } from 'antd';
import RcResizeObserver from 'rc-resize-observer';
import { useState } from 'react';
import staffs, { Staff } from './staff';

const Logs: React.FC = () => {
  const [responsive, setResponsive] = useState(false);
  const sideMembers = staffs.sideStaffList.length;

  const pushSideStaff = (sideStaff: JSX.Element[][], tempMembers: Staff[]) => {
    sideStaff.push(
      tempMembers.map((staff: Staff, idx) => (
        <ProCard key={idx} style={{ whiteSpace: 'pre-line' }}>
          <Brief
            avatar={staff.avatar}
            name={staff.name}
            nickname={staff.nickname}
            profile={staff.profile}
            link={staff.link}
            linktext={staff.linktext}
            isSideStaff
          />
        </ProCard>
      )),
    );
  };

  let sideStaff: JSX.Element[][] = [],
    tempMembers: Staff[] = [], i = 0, j;

  /// 当个数模 3 余 1 时，先放置 2 行，每行 2 个；
  /// 当个数模 3 余 2 时，先放置 1 行，每行 2 个；
  /// 其余按每行 3 个放置
  for (j = 0; j < Math.round(sideMembers / 3); j++) {
    tempMembers.push(staffs.sideStaffList[i++]);
    tempMembers.push(staffs.sideStaffList[i++]);
    if (j >= (3 - sideMembers % 3) % 3) {
      tempMembers.push(staffs.sideStaffList[i++]);
    }
    pushSideStaff(sideStaff, tempMembers);
    tempMembers = [];
  }

  const staffRenderer = (
    <div>
      <RcResizeObserver
        key="resize-observer"
        onResize={(offset) => {
          setResponsive(offset.width < 596);
        }}
      >
        <ProCard.Group direction={responsive ? 'column' : 'row'}>
          {staffs.staffList.map((staff: Staff, idx) => (
            <ProCard key={idx} style={{ whiteSpace: 'pre-line' }}>
              <Brief
                avatar={staff.avatar}
                name={staff.name}
                nickname={staff.nickname}
                profile={staff.profile}
                link={staff.link}
                linktext={staff.linktext}
              />
            </ProCard>
          ))}
        </ProCard.Group>
        {sideStaff.map((staffLine, idx) => (
          <ProCard.Group direction={responsive ? 'column' : 'row'} key={idx}>
            {staffLine}
          </ProCard.Group>
        ))}
      </RcResizeObserver>
    </div>
  );
  return (
    <PageContainer>
      <Card>{staffRenderer}</Card>
    </PageContainer>
  );
};
export default Logs;