import * as React from 'react';
import { isEmpty } from 'lodash';

import { formatPrice } from 'utils/helpers';
import { ISummaryItem } from 'typings';

import s from './SummaryListItem.module.scss';
import classNames from 'classnames/bind';

const cn = classNames.bind(s);

interface ISummaryListItemProps {
  item: ISummaryItem;
}

const SummaryListDetail = (items: Array<ISummaryItem>, level: number) =>
  items.map(
    ({ showChildren, billedUnit, measureUnit, displayUnits, children, displayText, amount }) => (
      <div key={`${displayText}-${amount}`}>
        <div className={cn(s.summaryListItem__line, `level${level}`)}>
          <div className={s.summaryListItem__label}>{displayText}</div>
          {displayUnits && (
            <div className={s.summaryListItem__count}>
              {billedUnit ? billedUnit : 0} {measureUnit}
            </div>
          )}
          {!isNaN(amount!) && (
            <div className={s.summaryListItem__amount}>{formatPrice(amount!)}</div>
          )}
        </div>
        {showChildren && !isEmpty(children) && SummaryListDetail(children!, 3)}
      </div>
    ),
  );

export const SummaryListItem = ({ item }: ISummaryListItemProps) => {
  const { displayText, billedUnit, measureUnit, amount, displayUnits, children, showChildren } =
    item;

  return (
    <div className={s.summaryListItem}>
      <div className={cn(s.summaryListItem__line, 'level1')}>
        <div className={s.summaryListItem__label}>{displayText}</div>
        {displayUnits && (
          <div className={s.summaryListItem__count}>
            {billedUnit} {billedUnit && measureUnit}
          </div>
        )}
        <div className={s.summaryListItem__amount}>{formatPrice(amount!)}</div>
      </div>
      {showChildren && !isEmpty(children) && SummaryListDetail(children!, 2)}
    </div>
  );
};