import React, { FunctionComponent, useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { WithLoader } from "../WithLoader";

export interface Item {
  id: string
  [propName: string]: any;
}

export interface TabDefinition {
  label: string
  itemFilter?: (item: Item) => boolean
}


export interface ItemPanelProps {
  className?: string
  itemIconClassName?: string
  title?: string
  newItemUrl: string
  isLoading?: boolean
  items: Item[]
  tabs?: TabDefinition[],
  itemKey: (item: Item, index: number) => string
  itemLabel: (item: Item, index: number) => string
  itemUrl: (item: Item, index: number) => string
}

export const ItemPanel: FunctionComponent<ItemPanelProps> = (props) => {
  const { 
    title, className, newItemUrl, 
    itemKey, itemLabel, 
    itemIconClassName, itemUrl
  } = props;
  
  const [ state, setState ] = useState({ selectedTab: 0, filteredItems: [] });

  const filterItemsForTab = (tab: TabDefinition, items: Item[]) => {
    const itemFilter = tab && typeof tab.itemFilter === 'function' ? tab.itemFilter : () => true;
    return items.filter(itemFilter);
  };

  const selectTab = (tabIndex: number) => {
    setState(state => {
      const { tabs, items } = props;      
      const newTab = Array.isArray(tabs) && tabs.length > 0 ? tabs[tabIndex] : null;
      return { 
        ...state, 
        selectedTab: tabIndex,
        filteredItems: filterItemsForTab(newTab, items)
      };
    });
  };

  useEffect(() => {
    setState(state => {
      const { tabs, items } = props;      
      const newTab = Array.isArray(tabs) && tabs.length > 0 ? tabs[state.selectedTab] : null;
      return {
        ...state,
        filteredItems: filterItemsForTab(newTab, items),
      }
    });
  }, [props.items, props.tabs]);

  const itemElements = state.filteredItems.map((item: Item, i: number) => {
    return (
      <Link to={itemUrl(item, i)} key={`item-${itemKey(item, i)}`} className="panel-block">
        <span className="panel-icon">
          <i className={itemIconClassName} aria-hidden="true"></i>
        </span>
        {itemLabel(item, i)}
      </Link>
    );
  });

  const tabs = props.tabs || [];

  return (
    <nav className={`panel ${className}`}>
      <div className="level is-mobile panel-heading mb-0">
        <div className="level-left">
          <p className="level-item">{title}</p>
        </div>
        <div className="level-right">
          <Link to={newItemUrl} className="button level-item is-outlined is-info is-inverted">
            <i className="icon fa fa-plus"></i>
          </Link>
        </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">
        {
          tabs.map((tab, i) => {
            return (
              <a key={`workgroup-tab-${i}`}
                onClick={selectTab.bind(null, i)}
                className={i === state.selectedTab ? 'is-active' : ''}>
                {tab.label}
              </a>
            )
          })
        }
      </p>
      {
        itemElements.length > 0 ?
        itemElements :
        <a className="panel-block has-text-centered is-block">
          <em>Aucun élément pour l'instant.</em>
        </a>
      }
    </nav>
  )
};