import * as React from 'react';
import { InfoTooltip, Box, Text } from '@nova-hf/ui';
import { withTranslation, WithTranslation } from 'utils/i18n';
import { formatPrice, formatDate, diffInDays, formatNumber } from 'utils/helpers';
import classNames from 'classnames/bind';

import SVGCheck from 'assets/svg/success.svg';

import { IClaim } from 'typings';

import s from './ClaimListItem.module.scss';

const cn = classNames.bind(s);

interface IClaimListItemProps extends WithTranslation {
  color: string;
  claim: IClaim;
  onSelect(claimNumber: IClaim): any;
  selected?: boolean;
  disabled?: boolean;
  showMore: boolean;
  onShowMore: any;
}

class ClaimListItem extends React.Component<IClaimListItemProps> {
  renderExtraCharge() {
    const { claim, t } = this.props;
    const { initialAmount, defaultCharges, penalty, otherCharges, motusCharge, totalCharge } =
      claim;

    return (
      <div className={s.claimListItem__extraBreakdown}>
        <Text color="black100" variant="eyebrowMedium">
          {t('claims.invoiceDetail')}
        </Text>
        <div className={cn(s.claimListItem__extraLine, 'orginial')}>
          <span className={s.claimListItem__extraLabel}>{t('claims.amount')}</span>
          <span className={s.claimListItem__extra}>{formatPrice(initialAmount)}</span>
        </div>
        <div className={s.claimListItem__extraLine}>
          <span className={s.claimListItem__extraLabel}>{t('claims.penalty')}</span>
          <span className={s.claimListItem__extra}>{formatPrice(penalty)}</span>
        </div>
        <div className={s.claimListItem__extraLine}>
          <span className={s.claimListItem__extraLabel}>{t('claims.defaultCharge')}</span>
          <span className={s.claimListItem__extra}>{formatPrice(defaultCharges)}</span>
        </div>
        <div className={s.claimListItem__extraLine}>
          <span className={s.claimListItem__extraLabel}>{t('claims.otherCharges')}</span>
          <span className={s.claimListItem__extra}>{formatPrice(otherCharges)}</span>
        </div>
        <div className={s.claimListItem__extraLine}>
          <span className={s.claimListItem__extraLabel}>{t('claims.motusCharge')}</span>
          <span className={s.claimListItem__extra}>{formatPrice(motusCharge)}</span>
        </div>
        <div className={cn(s.claimListItem__extraLine, 'total')}>
          <span className={s.claimListItem__extraLabel}>{t('claims.total')}</span>
          <span className={s.claimListItem__extra}>{formatPrice(totalCharge)}</span>
        </div>
      </div>
    );
  }

  renderInvoices() {
    const { claim, onShowMore, showMore, color, t } = this.props;
    const invoicesToDisplay = 3;
    const displayInvoices = showMore ? claim.invoices : claim.invoices.slice(0, invoicesToDisplay);

    return (
      <div className={s.claimListItem__extraBreakdown}>
        <div className={s.claimListItem__extraLine}>
          <Text color="black100" variant="eyebrowMedium">
            {t('claims.invoice')}
          </Text>
          {onShowMore && claim.invoices.length > invoicesToDisplay && (
            <button
              className={cn(s.claimListItem__extraHeaderButton, `color-${color}`)}
              type="button"
              onClick={onShowMore}
            >
              {showMore ? t('claims.less') : t('claims.more')}
            </button>
          )}
        </div>
        {displayInvoices.map((invoice) => (
          <div key={invoice.invoiceNumber} className={s.claimListItem__extraLine}>
            <Text variant="pSmallRegular">
              {formatDate(invoice.date, 'MMM')} &apos;{formatDate(invoice.date, 'yy')} (
              {invoice.invoiceNumber})
            </Text>
            <Text variant="pSmallRegular">{formatPrice(invoice.amount)}</Text>
          </div>
        ))}
        {onShowMore && !showMore && claim.invoices.length > invoicesToDisplay && '...'}
      </div>
    );
  }

  render() {
    const { color, claim, selected, onSelect, disabled, t } = this.props;
    const extraCharge =
      claim.defaultCharges + claim.penalty + claim.otherCharges + claim.motusCharge;
    const isExtraChargeZero = extraCharge === 0;
    const daysFromDueDate = diffInDays(new Date(), new Date(claim.dueDate));

    return (
      <div
        className={cn(s.claimListItem, { selected, disabled })}
        onClick={() => {
          onSelect(claim);
        }}
      >
        <div className={s.claimListItem__inner}>
          <div className={s.claimListItem__shadow}>
            <div className={cn(s.claimListItem__background, `color-${color}`)}>
              <div className={s.claimListItem__head}>
                <Box marginBottom={4}>
                  <Text variant="h6" color={disabled ? 'grey400' : undefined}>{`${t(
                    'claims.claim',
                  )}: ${claim.claimNumber}`}</Text>
                </Box>
                <div className={s.claimListItem__info}>
                  {claim.dueDate && (
                    <Box width="50%">
                      <Text variant="eyebrowMedium">{`${t('claims.dueDate')}:`}</Text>
                      <Text variant="pLargeRegular">{formatDate(claim.dueDate, 'dd.MM.yyyy')}</Text>
                    </Box>
                  )}
                  {claim.finalDueDate && (
                    <Box width="50%">
                      <Text variant="eyebrowMedium">{`${t('claims.finalDueDate')}:`}</Text>
                      <Text variant="pLargeRegular">
                        {formatDate(claim.finalDueDate, 'dd.MM.yyyy')}
                      </Text>
                    </Box>
                  )}
                </div>
                <div className={s.claimListItem__info}>
                  {daysFromDueDate > 0 && (
                    <Box width="100%">
                      <Text color="black100" variant="pLargeRegular">{`${formatNumber(
                        daysFromDueDate,
                      )} ${t('claims.daysFromDueDate')}`}</Text>
                    </Box>
                  )}
                </div>
              </div>
              <div className={s.claimListItem__bottom}>
                <div className={s.claimListItem__invoices}>{this.renderInvoices()}</div>
                <div className={s.claimListItem__extraChargeMobile}>{this.renderExtraCharge()}</div>
                <Text color="black100" variant="h6">
                  {formatPrice(claim.totalCharge)}
                </Text>
                <div className={cn(s.claimListItem__extraCharge, { warning: !isExtraChargeZero })}>
                  <Text color={disabled ? 'grey400' : 'black100'} variant="pSmallRegular">{`${t(
                    'claims.extraCharge',
                  )}: ${formatPrice(extraCharge)}`}</Text>
                  <InfoTooltip
                    color="dark"
                    background="grey400"
                    iconPos="topright"
                    iconSize="medium"
                    dialogSize="small"
                    dialogPos="left"
                  >
                    {this.renderExtraCharge()}
                  </InfoTooltip>
                </div>
                <button
                  type="button"
                  className={cn(s.claimListItem__button, `color-${color}`, { disabled })}
                >
                  {selected && (
                    <span>
                      <SVGCheck />
                    </span>
                  )}
                  {!selected && (
                    <span>{disabled ? t('claims.claimInMotus') : t('claims.payClaim')}</span>
                  )}
                </button>
              </div>
            </div>
            {/*<div className={s.claimListItem__edit}>
              <Edit />
            </div>*/}
          </div>
        </div>
      </div>
    );
  }
}

export default withTranslation('invoices')(ClaimListItem);