import React from 'react';
import { Page } from '../Page';
import { BoardCard } from './BoardCard';
import { connect } from 'react-redux';
import { fetchBoards } from '../../store/actions/boards';

export class HomePage extends React.Component {
  render() {
    return (
      <Page>
        <div className="container is-fluid">
          <div className="level">
            <div className="level-left"></div>
            <div className="level-right">
              <div className="buttons">
                <a className="button is-primary" href="#/boards/new">
                  <span className="icon">
                    <i className="fas fa-plus"></i>
                  </span>
                  <span>Nouveau tableau</span>
                </a>
              </div>
            </div>
          </div>
          { this.renderBoards() }
        </div>
      </Page>
    );
  }

  renderBoards() {
    const { boards } = this.props;
    const rows = Object.values(boards)
      .reduce((boardRows, board, index) => {
        if (index % 3 === 0) {
          boardRows.push([]);
        }
        boardRows[boardRows.length-1].push(board);
        return boardRows;
      }, [])
      .map((row, rowIndex) => {
        const tiles = row.map((board) => {
          return (
            <div key={`board-${board.id}`} className={`tile is-parent is-4`}>
              <div className="tile is-child">
                <BoardCard board={board} />
              </div>
            </div>
          );
        });
        return (
          <div key={`boards-row-${rowIndex}`} className="tile">
            {tiles}
          </div>
        );
      });
    ;

    return (
      <div className="tile is-ancestor is-vertical">
        { rows }
      </div>
    );
  }

  componentDidMount() {
    this.props.dispatch(fetchBoards());
  }

}

export const ConnectedHomePage = connect(function(state) {
  return {
    boards: state.boards.byID,
  };
})(HomePage);