import { observer } from 'mobx-react-lite';
import React from 'react';
import * as KanbanBoardStoreNs from '../kanban-board/store';
import * as IssuesListBoardNs from './issues-list-board';
import * as TopRightMenuNs from '../misc-components/top-right-menu';
import { SetIssuesReadingTimestamp } from '../utils/unreaded-provider';
import * as ServiceActionsButtons from '../utils/service-actions-buttons';

export type Props = {
  store: KanbanBoardStoreNs.IPageStore;
};

export const IssuesListBoards = observer((props: Props): JSX.Element => {
  const data = props.store.data;
  if (!props.store.loaded || !data) {
    return <div>Loading...</div>;
  }
  const list: any[] = [];
  for (let i = 0; i < data.length; i++) {
    const boardData = data[i];
    const key = boardData.metainfo.title;
    const board = (
      <IssuesListBoardNs.IssuesListBoard store={boardData} key={key} />
    );
    list.push(board);
  }
  const topRightMenuStore = TopRightMenuNs.Store.create({ visible: false });
  const onAllReadItemClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    SetIssuesReadingTimestamp(props.store.issueIds);
    KanbanBoardStoreNs.PageStoreLoadData(props.store);
  };
  return (
    <>
      <TopRightMenuNs.TopRightMenu store={topRightMenuStore}>
        <button onClick={onAllReadItemClick}>Прочитать всё</button>
        <ServiceActionsButtons.IssuesForceRefreshButton />
        <ServiceActionsButtons.GetIssuesQueueSizeButton />
      </TopRightMenuNs.TopRightMenu>
      {list}
    </>
  );
});
