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 { useStore } from '@/shared/model/store';
import { useTranslation } from 'react-i18next';

export const ListDateGroup = ({
  transactionCategory,
  date,
  items
}: ListDateGroupProps) => {
  const { t, i18n } = useTranslation();

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

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

  const getLocalizedServiceCodeName = (name?: string): string => {
    if (!name) return '';

    const nameMap: Record<string, string> = {
      '전체': t('transaction.constants.all'),
      '신용카드': t('transaction.constants.creditCard'),
      '계좌이체': t('transaction.constants.accountTransfer'),
      '가상계좌': t('transaction.constants.virtualAccount'),
      '휴대폰': t('transaction.constants.mobilePayment'),
      '문화상품권': t('transaction.constants.cultureLand'),
      '(구)SSG머니': t('transaction.constants.ssgMoney'),
      'SSG은행계좌결제': t('transaction.constants.ssgBank'),
      '계좌간편결제': t('transaction.constants.accountSimpleTransfer'),
      '티머니페이': t('transaction.constants.tmoneyPay'),
    };

    return nameMap[name] || name;
  };

  const getServiceName = (serviceCode: string) => {
    let serviceName = '';
    for(let i=0;i<serviceCodes.length;i++){
      if(serviceCodes[i].value === serviceCode){
        serviceName = getLocalizedServiceCodeName(serviceCodes[i].name);
        break;
      }
    }
    return serviceName;
  };

  const getListItem = () => {
    let rs = [];
    if(!!items && items.length>0){
      for(let i=0;i<items.length;i++){
        let key = 'ListItem-'+i;
        let serviceName = '';
        let serviceCode = items[i]?.serviceCode
        if(serviceCode){
          serviceName = getServiceName(serviceCode);
        }
        
        rs.push(
          <ListItem
            transactionCategory={ transactionCategory }
            key={ key }
            tid={ items[i]?.tid }
            mid={ items[i]?.mid }
            statusCode={ items[i]?.statusCode }
            installmentMonth={ items[i]?.installmentMonth }
            serviceName={ serviceName }
            serviceCode={ serviceCode }
            serviceDetailName={ items[i]?.serviceDetailName }
            goodsAmount={ items[i]?.goodsAmount }

            approvalNumber={ items[i]?.approvalNumber }
            amount={ items[i]?.amount }
            customerName={ items[i]?.customerName }
            issueNumber={ items[i]?.issueNumber }
            paymentMethod={ items[i]?.paymentMethod }
            processResult={ items[i]?.processResult }
            transactionType={ items[i]?.transactionType }
            transactionDateTime={ items[i]?.transactionDateTime }

            transactionAmount={ items[i]?.transactionAmount }
            deliveryStatus={ items[i]?.deliveryStatus }
            settlementStatus={ items[i]?.settlementStatus }
            cancelStatus={ items[i]?.cancelStatus }

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

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