import React from 'react';
import Tabs from 'app/shared/components/Tabs/Tabs';
import { useDispatch, useSelector } from 'react-redux';
import { redirectTo } from 'app/common/store/router/router.actions';
import {
  ROUTER,
  technicalManagementPoolVesselBunkerAdjustmentTrendsRoute,
  technicalManagementPoolVesselRoute,
  vesselDetailsBunkerAdjustmentRoute,
  vesselDetailsBunkerAdjustmentTrendsRoute,
} from 'app/common/routes';
import PeriodFilter from 'app/shared/components/PeriodFilter/PeriodFilter';
import { selectCurrentPeriod, selectPeriodOptions } from 'app/modules/bunkerAdjustment/store/bunkerAdjustment.selectors';
import { bunkerAdjustmentSetCurrentPeriod } from 'app/modules/bunkerAdjustment/store/bunkerAdjustment.actions';
import { getLocation } from 'app/common/store/router/router.selectors';
import cx from 'classnames';

const routes = {
  technicalManagement: {
    main: technicalManagementPoolVesselRoute,
    trends: technicalManagementPoolVesselBunkerAdjustmentTrendsRoute,
  },
  otherUsers: {
    main: vesselDetailsBunkerAdjustmentRoute,
    trends: vesselDetailsBunkerAdjustmentTrendsRoute,
  },
};

const getRouteContext = isTechnicalManager => routes[isTechnicalManager ? 'technicalManagement' : 'otherUsers'];

export interface Props {
  isTechnicalManager?: boolean;
}

const BunkerAdjustmentNavigationBar = ({ isTechnicalManager }: Props) => {
  const dispatch = useDispatch();
  const location = useSelector(getLocation);
  const periods = useSelector(selectPeriodOptions);
  const selectedPeriod = useSelector(selectCurrentPeriod);

  const tabs = [ 'Bunker Adjustment Calculation', 'Trends' ];

  const handleClick = (name) => {
    const options = ROUTER.lookup(location.pathname).options;
    const { pool, vesselCode, partnerAxCode } = options;
    dispatch(name === tabs[0]
      ? redirectTo({
        routeName: getRouteContext(isTechnicalManager).main,
        options: { pool, vesselCode, partnerAxCode },
        replace: true,
      })
      : redirectTo({
        routeName: getRouteContext(isTechnicalManager).trends,
        options: { pool, vesselCode, partnerAxCode },
        replace: true,
      })
    );
  };

  const handlePeriodChange = (value) => {
    dispatch(bunkerAdjustmentSetCurrentPeriod(value));
  };

  const checkActiveRoute = () => {
    const lookup = ROUTER.lookup(location.pathname);
    return lookup.name === getRouteContext(isTechnicalManager).trends ? tabs[1] : tabs[0];
  };

  const navigationContainerClassname = cx(
    'c-bunker-adjustment-navigation-bar',
    'o-layout',
    'o-layout--space-between',
    'o-layout--wrap',
    'o-page-layout--sticky-header',
    'o-page-layout__table-header--with-sub-big',
    'o-page-layout__table-header',
    'o-page-layout__table-header--no-mobile',
    'u-margin-top',
    'u-margin-md-top--enormous',
    'u-margin-md-bottom--big',
    'u-margin-bottom',
    'o-gutter-bottom',
    'o-gutter-top',
  );

  return <div className={navigationContainerClassname}>
    <div className="o-layout o-layout--vertical o-layout__item-12 o-layout__item-sm-7">
      <label className="c-bunker-adjustment-navigation-bar__label u-margin-bottom--medium">select view</label>
      <Tabs tabs={tabs} clickEvent={handleClick} defaultActive={checkActiveRoute()}/>
    </div>

    {checkActiveRoute() === tabs[0] && <div className="o-layout o-layout--vertical o-layout__item o-layout__item-sm-auto u-margin-top--medium u-margin-md-top--none">
      <label className="c-bunker-adjustment-navigation-bar__label u-margin-bottom">select period</label>
      <PeriodFilter options={periods} selected={selectedPeriod} onChange={handlePeriodChange}/>
    </div>}
  </div>;
};

export default BunkerAdjustmentNavigationBar;