import React from 'react';
import * as KB from './kanban-board';
import { IPageStore, PageStoreLoadData } from './store';
import { observer } from 'mobx-react-lite';
import * as TopRightMenuNs from '../misc-components/top-right-menu';
import { SetIssuesReadingTimestamp } from '../utils/unreaded-provider';
import axios from 'axios';
import * as ServiceActionsButtons from '../utils/service-actions-buttons';

export type Props = {
  store: IPageStore;
};

export const KanbanBoards = observer((props: Props) => {
  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 = <KB.KanbanBoard store={boardData} key={key} />;
    list.push(board);
  }
  const topRightMenuStore = TopRightMenuNs.Store.create({ visible: false });
  const onAllReadClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    SetIssuesReadingTimestamp(props.store.issueIds);
    PageStoreLoadData(props.store);
  };
  let treeRefreshMenuItem: JSX.Element = <></>;
  if (props.store.canTreeRefresh) {
    const onTreeRefreshClick = (e: React.MouseEvent) => {
      if (e.target !== e.currentTarget) return;
      e.stopPropagation();
      axios.get(
        `${process.env.REACT_APP_BACKEND}simple-kanban-board/tree/${props.store.name}/refresh`,
      );
    };
    treeRefreshMenuItem = (
      <button onClick={onTreeRefreshClick}>Force tree refresh</button>
    );
  }
  return (
    <>
      <TopRightMenuNs.TopRightMenu store={topRightMenuStore}>
        <button onClick={onAllReadClick}>Всё прочитано</button>
        {treeRefreshMenuItem}
        <ServiceActionsButtons.IssuesForceRefreshButton />
        <ServiceActionsButtons.GetIssuesQueueSizeButton />
      </TopRightMenuNs.TopRightMenu>
      {list}
    </>
  );
});

export default KanbanBoards;