import React, { useState } from 'react';
import { UPDATE_NOTIFICATION_CATEGORY } from 'app/modules/notifications/store/updateNotification/updateNotifications.constants';
import { NavTab } from './navTab';
import { POOL_SECTION } from 'app/modules/pools/store';
import { dashboardPoolRoute, ROUTER } from 'app/common/routes';
import { some } from 'lodash';
import { Collapsible } from 'app/shared/components/collapsible/collapsible';
import * as Text from 'app/shared/components/text/text';
import cx from 'classnames';

interface Props {
  userPools: any;
  updateNotifications: any;
  section: any;
  additionalRouteParams?: {
    [key: string]: string;
  }
}

const mapSectionNameToNotificationCategory = (sectionName) => {
  switch (sectionName) {
    case POOL_SECTION.FORECAST:
      return UPDATE_NOTIFICATION_CATEGORY.FORECAST;
    case POOL_SECTION.DOCUMENTS:
      return UPDATE_NOTIFICATION_CATEGORY.DOCUMENTS;
    default:
      return false;
  }
};

export const TopNavTabList = ({ userPools, updateNotifications, section, additionalRouteParams }: Props) => {
  const [ isListExpanded, changeListExpansion ] = useState(false);
  const poolRoute = section ? `${section}PoolRoute` : dashboardPoolRoute;
  const actualPoolName = userPools.find((userPools) => location.pathname.includes(userPools.id))?.name;


  const poolTabsList = userPools.map((pool) => {
    const notificationCategory = mapSectionNameToNotificationCategory(section);
    return <div key={pool.id} className="c-top-nav-tab__nav-item-mobile-menu-height o-layout o-layout--aligned o-layout--justified">
      <NavTab
        to={ROUTER.generate(poolRoute, { pool: pool.id, ...additionalRouteParams })}
        title={pool.name}
        key={pool.id}
        hasUpdateNotification={some(updateNotifications, { category: notificationCategory, poolId: pool.id })}
      />
    </div>;
  });

  return (
    <>
      <div className={'c-top-nav-tab__wrapper u-display--none u-display-md--flex'}>
        {poolTabsList}
      </div>
      <div className={'c-top-nav-tab__wrapper c-top-nav-tab__wrapper--side-compensation u-display-md--none u-flex-column o-layout'} onClick={() => changeListExpansion(!isListExpanded)} >
        <div className='c-top-nav-tab__nav-item-height o-layout o-layout--aligned'>
          <div className='c-top-nav-tab__mobile-menu-title u-flex-column o-layout'>
            <Text.Menu extraClass={cx('c-top-nav-tab__text c-top-nav-tab__mobile-menu-text o-layout o-layout--aligned o-layout--justified')}>
              {actualPoolName}
            </Text.Menu>
          </div>
          <span className={cx('c-vessel-general-info__trigger-icon c-top-nav-tab__mobile-menu-icon', { 'c-vessel-general-info__trigger-icon--flipped': isListExpanded })}>
            <i className="icon-flat-arrow-down " />
          </span>
        </div>
        <Collapsible isCollapsed={!isListExpanded} printViewAlawaysExpanded>
          <div className={'o-layout u-flex-column u-justify-content'}>
            { poolTabsList }
          </div>
        </Collapsible>
      </div>
    </>

  );
};