import moment from 'moment';
import 'moment/dist/locale/ko';
import 'moment/dist/locale/en-gb';
import { ListDateGroupProps } from '../model/types';
import { ListItem } from '../ui/list-item';
import { useTranslation } from 'react-i18next';

export const ListDateGroup = ({
  additionalServiceCategory,
  mid,
  date,
  items,
  onResendClick
}: ListDateGroupProps) => {
  const { i18n } = useTranslation();

  // Set moment locale based on current language
  const currentLocale = i18n.language === 'ko' ? 'ko' : 'en-gb';
  moment.locale(currentLocale);

  const getStateDate = () => {
    let stateDate = moment(date).format('YY.MM.DD(ddd)');
    return stateDate;
  };

  const getListItem = () => {
    let rs = [];
    if(!!items && items.length>0){
      for(let i=0;i<items.length;i++){
        let key = 'ListItem-'+i;
        rs.push(
          <ListItem
            additionalServiceCategory={ additionalServiceCategory }
            key={ key }
            mid={ mid }
            tid={ items[i]?.tid }
            orderDate= { items[i]?.orderDate}
            paymentStatus={ items[i]?.paymentStatus}
            requestDate={ items[i]?.requestDate }
            requestTime={ items[i]?.requestTime}
            registDate={ items[i]?.registDate }
            bankName={ items[i]?.bankName}
            accountName={ items[i]?.accountName}
            accountNo={ items[i]?.accountNo }
            resultStatus={ items[i]?.resultStatus }
            resultMessage={ items[i]?.resultMessage }
            applicationDate={ items[i]?.applicationDate }
            transactionTime={ items[i]?.transactionTime }
            transactionDate={ items[i]?.transactionDate }
            transactionCode={ items[i]?.transactionCode }
            transactionType={ items[i]?.transactionType }
            customerName={ items[i]?.customerName }
            statusLabel={ items[i]?.statusLabel }

            amount={ items[i]?.amount }
            sendDate={ items[i]?.sendDate }
            sendStatus={ items[i]?.sendStatus}
            sendMethod={ items[i]?.sendMethod}
            scheduledSendDate={ items[i]?.scheduledSendDate}
            processStatus={ items[i]?.processStatus}

            submallId={ items[i]?.submallId }
            settlementDate={ items[i]?.settlementDate }
            companyName={ items[i]?. companyName }
            status={ items[i]?.status }

            orderStatus={ items[i]?.orderStatus }
            orderTime={ items[i]?.orderTime }
            buyerPhoneLast4={ items[i]?.buyerPhoneLast4 }
            buyerName={ items[i]?.buyerName}
            statusColor={ items[i]?.statusColor}
            cursorId={ items[i]?.cursorId}
            subReqId={ items[i]?.subReqId}
            requestId={ items[i]?.requestId}
            detailExposure={ items[i]?.detailExposure}
            receiverInfo={ items[i]?.receiverInfo}
            authStatus= { items[i]?.authStatus}

            alimCl={ items[i]?.alimCl }
            sendType={ items[i]?.sendType }
            sendCl={ items[i]?.sendCl }
            paymentMethod={ items[i]?.paymentMethod }
            receiverName={ items[i]?.receiverName }
            serviceCode={ items[i]?.serviceCode}
            groupId={ items[i]?.groupId}
            cpid={ items[i]?.cpid}
            userMallId={ items[i]?.userMallId}
            transType={ items[i]?.transType }
            authResult={ items[i]?.authResult }
            failReason={ items[i]?.failReason }

            smsCl= { items[i]?.smsCl }
            onResendClick={ onResendClick }

            seq= { items[i]?.seq}
          ></ListItem>
        )
      }  
    }
    
    return rs;
  };

  return (
    <>
      <div className="date-group">
        <div className="date-header">{ getStateDate() }</div>
        { getListItem() }
      </div>
    </>
  );
};