import React from 'react';
import HoverInfo from 'app/shared/components/hoverInfo/hoverInfo';
import * as Text from 'app/shared/components/text/text';
import { useDispatch, useSelector } from 'react-redux';
import { BENCHMARK_MODE_SPOT, BENCHMARK_MODE_YEAR } from '../store/earnings.constants';
import { setBenchmarkMode } from '../store/earnings.actions';
import { selectBenchmarkMode } from '../store/benchmark.selectors';
import cx from 'classnames';
import { ROUTER } from 'app/common/routes';
import { selectCurrentPoolName } from 'app/shared/services/filters/filters.service';

const mapPoolNameToUrl = (poolName: string) => {
  switch (poolName.toUpperCase()) {
    case 'HANDY':
      return '/assets/files/Handy_benchmarks.pdf';
    case 'MR':
      return '/assets/files/MR_benchmarks.pdf';
    case 'LR2':
      return '/assets/files/LR2_benchmarks.pdf';
    default:
      return null;
  }
};

const TceBenchmarkToggle = () => {
  const dispatch = useDispatch();
  const benchmarkMode = useSelector(selectBenchmarkMode);
  const currentPool = useSelector(selectCurrentPoolName(ROUTER.lookup(location.pathname).options.pool));

  const isModeYearSelected = benchmarkMode === BENCHMARK_MODE_YEAR;
  const brenchmarkSeeMoreUrl = mapPoolNameToUrl(currentPool);

  const toggleBenchmark = (isModeYear: boolean) => {
    const benchmarkValue = isModeYear ? BENCHMARK_MODE_YEAR : BENCHMARK_MODE_SPOT;
    dispatch(setBenchmarkMode(benchmarkValue));
  };

  return (
    <div className="o-layout u-align-items-center">
      <div className="u-display--inline-flex u-align-items-center u-cursor--pointer" onClick={() => toggleBenchmark(false)}>
        <div className={cx('c-tce-brenchmark-toggle__radio-button ', { 'c-tce-brenchmark-toggle__radio-button--selected': !isModeYearSelected })} />
        <div className="u-margin-left--small">
          <Text.Paragraph size="small" extraClass="u-margin--none">Global Spot</Text.Paragraph>
        </div>
      </div>
      <div className="u-display--inline-flex u-align-items-center u-cursor--pointer u-margin-left" onClick={() => toggleBenchmark(true)}>
        <div className={cx('c-tce-brenchmark-toggle__radio-button ', { 'c-tce-brenchmark-toggle__radio-button--selected': isModeYearSelected })} />
        <div className="u-margin-left--small">
          <Text.Paragraph size="small" extraClass="u-margin--none">1 Year TC</Text.Paragraph>
        </div>
      </div>
      <HoverInfo extraClass="u-margin-left--small" position="left" icon="icon-info-straight">
        <div className="u-static-size">
          <div className="u-margin-bottom">
            <Text.Label extraClass="u-font--clear-spacings">GLOBAL SPOT</Text.Label>
          </div>
          <div className="u-margin-bottom--medium">
            <div className="u-margin-top--small">
              <Text.Caption extraClass="u-font--clear-spacings u-no-wrap">
                Based on observed market spot rates
              </Text.Caption>
              <div className="u-margin-top--small">
                <Text.Caption extraClass="u-font--clear-spacings u-no-wrap">
                  by third parties.
                  { brenchmarkSeeMoreUrl &&
                  <a className="u-margin-left--tiny" href={brenchmarkSeeMoreUrl} target="_blank" rel="noreferrer">See more</a>
                  }
                </Text.Caption>
              </div>
            </div>
          </div>
          <div className="u-margin-bottom">
            <Text.Label extraClass="u-font--clear-spacings">1 YEAR TC</Text.Label>
          </div>
          <Text.Caption extraClass="u-font--clear-spacings u-no-wrap">
            Clarksons 1 Year Time
          </Text.Caption>
          <div className="u-margin-top--small">
            <Text.Caption extraClass="u-font--clear-spacings u-no-wrap">
              Charter Rate, excl comm. mng fee
            </Text.Caption>
          </div>
        </div>
      </HoverInfo>
    </div>
  );
};

export { TceBenchmarkToggle };