import moment from 'moment';
import 'moment/dist/locale/ko';
import { ListDateGroupProps } from '../model/types';
import { ListItem } from './list-item';

export const ListDateGroup = ({
  date,
  items
}: ListDateGroupProps) => {
  moment.locale('ko');
  const getStateDate = () => {
    let stateDate = moment(date).format('YYYY.MM');
    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
            key={ key }
            id={ items[i]?.id || 0 }
            companyName={ items[i]?.companyName || '' }
            mid={ items[i]?.mid || '' }
            issueDate={ items[i]?.issueDate || '' }
            paymentMethod={ items[i]?.paymentMethod || '' }
            amount={ items[i]?.amount || 0 }
          ></ListItem>
        )
      }  
    }
    
    return rs;
  };

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