import * as React from 'react';
import { formatPrice, formatDate } from 'utils/helpers';

// import Edit from 'assets/svg/edit.svg';
import SVGInvoices from 'assets/svg/invoices.svg';
import { IAccountTransaction } from 'typings';

import Checkbox from 'components/checkbox/Checkbox';

import s from './TransactionListItem.module.scss';
import { ITransactionTableHeaders } from './TransactionList';
import classNames from 'classnames/bind';

const cn = classNames.bind(s);

interface ITransactionListItemProps {
  color: string;
  transaction: IAccountTransaction;
  onMultiSelect(subscriptionId: IAccountTransaction): any;
  onSelect(subscriptionId: IAccountTransaction): any;
  selected: boolean;
  headers: ITransactionTableHeaders;
}

export const TransactionListItem = ({
  color,
  onSelect,
  onMultiSelect,
  transaction,
  selected,
  headers,
}: ITransactionListItemProps) => {
  const { pdfUrl, transactionId, date, voucherNumber, amount, description, remainder, balance } =
    transaction;

  return (
    <div className={s.transactionListItem}>
      {pdfUrl ? (
        <div className={s.transactionListItem__checkbox} onClick={() => onMultiSelect(transaction)}>
          <Checkbox
            radio
            color={color}
            checked={selected || false}
            name={transactionId.toString()}
            onChange={() => onMultiSelect(transaction)}
          />
        </div>
      ) : (
        <div className={s.transactionListItem__checkbox} />
      )}
      <div className={s.transactionListItem__transaction}>
        <div className={cn(s.transactionListItem__col, 'title')}>
          <span className={s.transactionListItem__label}>{headers.date}</span>
          {pdfUrl ? (
            <span
              className={cn(s.transactionListItem__value, `color-${color}`, 'clickable')}
              onClick={() => onMultiSelect(transaction)}
            >
              {formatDate(new Date(date), 'dd.MM.yyyy')}
            </span>
          ) : (
            <span className={cn(s.transactionListItem__value, `color-${color}`)}>
              {formatDate(new Date(date), 'dd.MM.yyyy')}
            </span>
          )}
        </div>
        <div className={cn(s.transactionListItem__col, 'SVG')}>
          <span className={s.transactionListItem__label}>{headers.pdf}</span>
          {pdfUrl && (
            <button
              type="button"
              title="Sækja fylgiskjal"
              className={cn(s.transactionListItem__value, 'clickable')}
              onClick={() => onSelect(transaction)}
            >
              <SVGInvoices className={s.transactionListItem__svg} />
            </button>
          )}
        </div>
        <div className={cn(s.transactionListItem__col, 'status')}>
          <span className={s.transactionListItem__label}>{headers.attachment}</span>
          <span className={s.transactionListItem__value}>{voucherNumber}</span>
        </div>
        <div className={cn(s.transactionListItem__col, 'status')}>
          <span className={s.transactionListItem__label}>{headers.description}</span>
          <span className={s.transactionListItem__value}>{description}</span>
        </div>
        <div className={cn(s.transactionListItem__col, 'amount', 'total')}>
          <span className={s.transactionListItem__label}>{headers.amount}</span>
          <span className={s.transactionListItem__value}>
            {formatPrice(amount, { showZero: true })}
          </span>
        </div>
        <div className={cn(s.transactionListItem__col, 'amount')}>
          <span className={s.transactionListItem__label}>{headers.remaining}</span>
          <span className={s.transactionListItem__value}>
            {formatPrice(remainder, { showZero: true })}
          </span>
        </div>
        <div className={cn(s.transactionListItem__col, 'amount')}>
          <span className={s.transactionListItem__label}>{headers.sgm}</span>
          <span className={s.transactionListItem__value}>
            {formatPrice(balance, { showZero: true })}
          </span>
        </div>
      </div>
    </div>
  );
};