import React, { ReactNode } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { redirectTo } from 'app/common/store/router/router.actions';
import { vesselDetailsRoute, VesselDetailsVoyageRoute } from 'app/common/routes';
import { getCurrentPoolId } from 'app/shared/store/filters/selectors';
import numberPipe from 'app/shared/pipes/number.pipe';
import { DashboardVesselListLabel } from 'app/modules/dashboard/components/dashboardVesselListLabel';
import Laden from '../vesselIcon/svgs/laden.component.svg';
import Ballast from '../vesselIcon/svgs/ballast.component.svg';
import Placeholder from '../vesselIcon/svgs/placeholder-vessel.component.svg';
import { VesselIconWithClock } from 'app/modules/dashboard/vesselIcon/vesselIconWithClock';
import { VesselIconWithSun } from 'app/modules/dashboard/vesselIcon/vesselIconWithSun';
import { VesselLoadingIcon } from 'app/modules/dashboard/vesselIcon/vesselLoadingIcon';
import { VesselDischargingIcon } from 'app/modules/dashboard/vesselIcon/vesselDischargingIcon';
import { Caption, Headline, Paragraph } from 'app/shared/components/text/text';
import cx from 'classnames';

const primaryIconColor = '#003E5E';
const defautltSvgProps = { fill: primaryIconColor, width: '100%', height: '100%' };

const mapImageStatus = (status) => {
  switch (status) {
    case 'Ballast':
      return (
        <VesselIconWithSun color={primaryIconColor}>
          <Ballast {...defautltSvgProps} />
        </VesselIconWithSun>
      );
    case 'Discharging':
      return <VesselDischargingIcon {...defautltSvgProps} />;
    case 'Loading':
      return <VesselLoadingIcon {...defautltSvgProps} />;
    case 'Laden':
      return (
        <VesselIconWithSun color={primaryIconColor}>
          <Laden {...defautltSvgProps} />
        </VesselIconWithSun>
      );
    case 'Waiting':
    case 'Waiting Days':
      return (
        <VesselIconWithClock color={primaryIconColor}>
          <Placeholder {...defautltSvgProps} />
        </VesselIconWithClock>
      );
    default:
      return <Placeholder {...defautltSvgProps} />;
  }
};

interface Data {
  name: string;
  vesselCode: string;
  partnerAxCode: string;
  earnings: number;
  consumption: number;
  cO2: number;
  voyageDays: number;
  vesselStatus: string;
  voyageType?: string;
  voyageStatus?: string;
  portName?: string;
  velocity?: number;
  isOnVoyage?: boolean;
}

interface IHoverTooltips {
  earnings: ReactNode;
  consumption: ReactNode;
  co2Emission: ReactNode;
  voyageDays: ReactNode;
}

export interface Props {
  data: Data;
  isCurrentVoyage?: boolean;
  hoverTooltips: IHoverTooltips;
}

const DashboardVesselListItem = ({ data, isCurrentVoyage, hoverTooltips }: Props) => {
  const dispatch = useDispatch();
  const poolId = useSelector(getCurrentPoolId);

  const showData = data.isOnVoyage ?? true;
  const showEarnigns = !isCurrentVoyage || data.voyageType?.toLowerCase() !== 'unfixed';
  const contentClass = cx('c-dashboard-vessel-list-item__content', { 'c-dashboard-vessel-list-item__content--previous-period': !isCurrentVoyage });
  
  const redirect = () => {
    dispatch(redirectTo({
      routeName: isCurrentVoyage ? VesselDetailsVoyageRoute : vesselDetailsRoute,
      options: {
        pool: poolId,
        partnerAxCode: data.partnerAxCode,
        vesselCode: data.vesselCode,
      },
    }));
  };

  return <div className="c-dashboard-vessel-list-item o-layout o-layout--wrap u-margin-top" onClick={redirect}>
    <div className="c-dashboard-vessel-list-item__content c-dashboard-vessel-list-item__content--big">
      <div className="c-dashboard-vessel-list-item__content--main o-layout">
        <div className="c-dashboard-vessel-list-item__image u-margin-right--medium">
          {showData ? mapImageStatus(data.voyageStatus) : mapImageStatus('none')}
        </div>
        <div className="c-dashboard-vessel-list-item--separated o-layout o-layout--vertical o-layout--full-width">
          <Headline size="h4" extraClass="c-dashboard-vessel-list-item__details">
            {data.name}
          </Headline>
          <div className="c-dashboard-vessel-list-item__wrapped-details o-layout o-layout--vertical">
            <Caption extraClass="c-dashboard-vessel-list-item__details--small u-color--dark-grey u-margin-bottom--none">
              {showData ? data.voyageType : 'Not on voyage'}
            </Caption>
            { showData &&
              <Caption extraClass="c-dashboard-vessel-list-item__details--small u-color--dark-grey u-margin-bottom--none">
                {data.voyageStatus}
              </Caption>
            }
            <Caption extraClass="c-dashboard-vessel-list-item__details--small u-color--dark-grey u-margin-bottom--none">
              {data.portName}
            </Caption>
            <Caption extraClass="c-dashboard-vessel-list-item__details--small u-color--dark-grey u-margin-bottom--none">
              {data.velocity !== undefined ? `${data.velocity} knots` : ''}
            </Caption>
          </div>
        </div>
      </div>
    </div>
    <div className={contentClass}>
      <div className="o-layout u-margin-top--small">
        <div className="c-dashboard-vessel-list-item__label o-layout__item-6 o-layout__item-sm-5">
          <DashboardVesselListLabel label="earnings" subLabel="$/day" info={hoverTooltips.earnings}/>
        </div>
        <div className="o-layout__item-6 o-layout__item-sm-7">
          <Paragraph size="small" extraClass="u-margin-bottom--none">
            {showEarnigns && showData ? numberPipe.format(data.earnings, 2, 2) : '-'}
          </Paragraph>
        </div>
      </div>
    </div>
    <div className={contentClass}>
      <div className="o-layout u-margin-top--small">
        <div className="c-dashboard-vessel-list-item__label o-layout__item-6 o-layout__item-sm-5">
          <DashboardVesselListLabel label="consumption" subLabel="MT" info={hoverTooltips.consumption}/>
        </div>
        <div className="o-layout__item-6 o-layout__item-sm-7">
          <Paragraph size="small" extraClass="u-margin-bottom--none">
            {showData && data.consumption ? numberPipe.format(data.consumption) : '-'}
          </Paragraph>
        </div>
      </div>
    </div>
    <div className={contentClass}>
      <div className="c-dashboard-vessel-list-item__dynamic-wrap-item o-layout u-margin-top--small">
        <div className="c-dashboard-vessel-list-item__label o-layout__item-6 o-layout__item-sm-5">
          <DashboardVesselListLabel label="co2 emission" subLabel="MT" info={hoverTooltips.co2Emission}/>
        </div>
        <div className="o-layout o-layout--vertical">
          <Paragraph size="small" extraClass="u-margin-bottom--none">
            {showData && data.cO2 ? numberPipe.format(data.cO2) : '-'}
          </Paragraph>
        </div>
      </div>
    </div>
    { isCurrentVoyage &&
      <div className={contentClass}>
        <div className="c-dashboard-vessel-list-item__dynamic-wrap-item o-layout u-margin-top--small">
          <div className="c-dashboard-vessel-list-item__label o-layout__item-6 o-layout__item-sm-5">
            <DashboardVesselListLabel label="voyage days" info={hoverTooltips.voyageDays}/>
          </div>
          <div className="o-layout o-layout--vertical">
            <Paragraph size="small" extraClass="u-margin-bottom--none">
              {showData && data.voyageDays ? numberPipe.format(data.voyageDays) : '-'}
            </Paragraph>
          </div>
        </div>
      </div>
    }
    <div className={contentClass}>
      <div className="o-layout u-margin-top--small">
        <div className="c-dashboard-vessel-list-item__label o-layout__item-6 o-layout__item-sm-5">
          <DashboardVesselListLabel label="vessel status"/>
        </div>
        <div className="o-layout__item-6 o-layout__item-sm-7 u-no-wrap">
          <Paragraph size="small" extraClass="u-margin-bottom--none">
            {showData ? data.vesselStatus : '-'}
          </Paragraph>
        </div>
      </div>
    </div>
  </div>;
};

export { DashboardVesselListItem };