import { observer } from 'mobx-react-lite';
import React from 'react';
import * as KanbanBoardStoreNs from '../kanban-board/store';
import Css from './issues-list-board.module.css';
import * as IssuesListCardNs from './issues-list-card';

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

export const IssuesListBoard = observer((props: Props): JSX.Element => {
  const list: JSX.Element[] = [];
  const data = props.store.data;
  for (let i = 0; i < data.length; i++) {
    const column = data[i];
    const issues: any[] = column.issues;
    for (let j = 0; j < issues.length; j++) {
      const issue = issues[j];
      list.push(
        <IssuesListCardNs.IssuesListCard store={issue} key={issue.id} />,
      );
    }
  }
  let title: JSX.Element;
  if (props.store.metainfo.url) {
    title = <a href={props.store.metainfo.url}>{props.store.metainfo.title}</a>;
  } else {
    title = <>{props.store.metainfo.title}</>;
  }
  return (
    <div className={Css.board}>
      <div className={Css.boardName}>
        <h2 className={Css.boardHeader} id={props.store.metainfo.title}>
          {title}
        </h2>
        <a href={`#${props.store.metainfo.title}`}>
          <img
            src="/images/anchor BLUE.svg"
            alt="anchor"
            className={Css.anchorIcon}
          />
        </a>
      </div>
      <div className={Css.listContainer}>{list}</div>
    </div>
  );
});
