import * as React from 'react';
import { IAccountTransaction } from 'typings';

import Checkbox from 'components/checkbox/Checkbox';

import s from './TransactionList.module.scss';
import classNames from 'classnames/bind';

const cn = classNames.bind(s);

interface ITransactionListProps {
  children: React.ReactNode;
  color: string;
  transactions?: IAccountTransaction[];
  onSelect?(profiles: IAccountTransaction[]): any;
  selected?: boolean;
  headers: ITransactionTableHeaders;
}

export interface ITransactionTableHeaders {
  date: string;
  pdf: string;
  attachment: string;
  description: string;
  sgm: string;
  amount: string;
  remaining: string;
  chooseAll: string;
}

export const TransactionList = ({
  children,
  color,
  onSelect,
  transactions,
  selected,
  headers,
}: ITransactionListProps) => {
  return (
    <div className={s.transactionList}>
      {headers && (
        <div className={s.transactionList__header}>
          <div className={s.transactionList__checkbox}>
            {transactions && onSelect && (
              <Checkbox
                radio
                color={color}
                name="selectall"
                checked={selected}
                onChange={() => onSelect(transactions)}
              />
            )}
          </div>
          <div className={s.transactionList__titles}>
            <div className={s.transactionList__month}>{headers.date}</div>
            <div className={cn(s.transactionList__status, 'SVG')}>{headers.pdf}</div>
            <div className={s.transactionList__status}>{headers.attachment}</div>
            <div className={s.transactionList__status}>{headers.description}</div>
            <div className={cn(s.transactionList__amount, 'total')}>{headers.amount}</div>
            <div className={s.transactionList__amount}>{headers.remaining}</div>
            <div className={s.transactionList__amount}>{headers.sgm}</div>
            {transactions && onSelect && (
              <div className={s.transactionList__label} onClick={() => onSelect(transactions)}>
                <span>{`${headers.chooseAll} (${transactions.length})`}</span>
              </div>
            )}
          </div>
        </div>
      )}
      {children}
    </div>
  );
};