import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { ListDateGroup } from '../list-date-group';
import { KeyInPaymentListItem, KeyInPaymentListProps } from '../../model/key-in/types';
import { JSX } from 'react';
import { useTranslation } from 'react-i18next';

export const KeyInPaymentList = ({
  additionalServiceCategory,
  listItems,
  mid
}: KeyInPaymentListProps) => {
  const { navigate } = useNavigate();
  const { t } = useTranslation();

  const getListDateGroup = () => {
    let rs = [];
    let date = '';
    let list = [];
    for (let i = 0; i < listItems.length; i++) {
      let items = listItems[i];
      if (!!items) {
        let transactionDate = items?.transactionDate;
        transactionDate = transactionDate?.substring(0, 8)
        if (!!transactionDate) {
          if (i === 0) {
            date = transactionDate;
          }
          if (date !== transactionDate) {
            if (list.length > 0) {
              rs.push(
                <ListDateGroup
                  additionalServiceCategory={additionalServiceCategory}
                  key={date + '-' + i}
                  date={date}
                  items={list}
                ></ListDateGroup>
              );
            }
            date = transactionDate;
            list = [];
          }
          list.push(items);
        }
      }
    }
    if (list.length > 0) {
      rs.push(
        <ListDateGroup
          additionalServiceCategory={additionalServiceCategory}
          mid={mid}
          key={date + '-last'}
          date={date}
          items={list}
        ></ListDateGroup>
      );
    }
    return rs;
  };

  const onClickToNavigate = () => {
    navigate(PATHS.additionalService.keyInPayment.request);
  };

  return (
    <>
      <section className="transaction-list">
        {getListDateGroup()}
      </section>
      <div className="apply-row">
        <button
          className="btn-50 btn-blue flex-1"
          onClick={() => onClickToNavigate()}
        >{t('additionalService.linkPay.paymentRequest')}</button>
      </div>
    </>
  );
}