import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '../../store/reducers/root';
import { fetchWorkgroups } from '../../store/actions/workgroups';
import { Workgroup } from '../../types/workgroup';
import { User } from '../../types/user';
import { Link } from 'react-router-dom';

export function WorkgroupsPanel() {
  const dispatch = useDispatch();
  const workgroups = useSelector<RootState>(state => state.workgroups.workgroupsById);
  const currentUserId = useSelector<RootState>(state => state.auth.currentUser.id);

  const filterTabs = [
    {
      label: "Mes groupes",
      filter: workgroups => Object.values(workgroups).filter((wg: Workgroup) => {
        return  wg.members.some((u: User) => u.id === currentUserId);
      })
    },
    {
      label: "Ouverts",
      filter: workgroups => Object.values(workgroups).filter((wg: Workgroup) => !wg.closedAt)
    },
    {
      label: "Clôs",
      filter: workgroups => Object.values(workgroups).filter((wg: Workgroup) => !!wg.closedAt)
    }
  ];

  const [ state, setState ] = useState({ selectedTab: 0 });

  const selectTab = (tabIndex: number) => {
    setState(state => ({ ...state, selectedTab: tabIndex }));
  }

  useEffect(() => {
    dispatch(fetchWorkgroups());
  }, []);

  const workgroupsItems = filterTabs[state.selectedTab].filter(workgroups).map((wg: Workgroup) => {
    return (
      <Link to={`/workgroups/${wg.id}`} key={`wg-${wg.id}`} className="panel-block">
        <span className="panel-icon">
          <i className="fas fa-users" aria-hidden="true"></i>
        </span>
        {wg.name}
      </Link>
    );
  })

  return (
    <nav className="panel is-info">
      <div className="level panel-heading">
        <div className="level-left">
          <p className="level-item">
          Groupes de travail
          </p>
        </div>
        <div className="level-right">
          <button className="button level-item is-outlined is-info is-inverted">
              <i className="icon fa fa-plus"></i>
          </button>
        </div>
      </div>
      {/* <div className="panel-block">
        <p className="control has-icons-left">
          <input className="input" type="text" placeholder="Filtrer..." />
          <span className="icon is-left">
            <i className="fas fa-search" aria-hidden="true"></i>
          </span>
        </p>
      </div> */}
      <p className="panel-tabs">
        {
          filterTabs.map((tab, i) => {
            return (
              <a key={`workgroup-tab-${i}`}
                onClick={selectTab.bind(null, i)}
                className={i === state.selectedTab ? 'is-active' : ''}>
                {tab.label}
              </a>
            )
          })
        }
      </p>
      {
        workgroupsItems.length > 0 ?
        workgroupsItems :
        <a className="panel-block has-text-centered is-block">
          <em>Aucun groupe dans cet catégorie pour l'instant.</em>
        </a>
      }
    </nav>
  )
}