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

export const ListDateGroup = ({
  date,
  periodType,
  items
}: 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++){
        rs.push(
          <ListItem
            key={ 'key-list-item-' + i }
            periodType={ periodType }
            settlementId={ items[i]?.settlementId }
            settlementDate={ items[i]?.settlementDate }
            merchantName={ items[i]?.merchantName }
            mid={ items[i]?.mid }
            tid={ items[i]?.tid }
            settlementAmount={ items[i]?.settlementAmount }
            approvalNumber={ items[i]?.approvalNumber }
            approvalDate={ items[i]?.approvalDate }
            transactionAmount={ items[i]?.transactionAmount }
          ></ListItem>
        )
      }  
    }
    
    return rs;
  };

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