import React from 'react';
import Price from '../Price';
import { ProductSubItemsProps } from '../utils/types';

const ProductSubItems = ({
  item,
  fullMode,
  kdsLayout,
  currency,
}: ProductSubItemsProps): JSX.Element => {
  if (
    item &&
    item.kind === 'group' &&
    (!item.items || item.items.length === 0)
  ) {
    return <div key={item.id}></div>;
  }

  return (
    <div key={item && item.id}>
      {item.items && item.items.length !== 0 ? (
        <>
          {item.literals.name && (
            <div>
              {item.literals.name}
              {kdsLayout !== 'compact' &&
                false &&
                item.price &&
                item.price !== '0.0' && (
                  <Price
                    amount={item.price}
                    currency={currency}
                    hideCurrency={true}
                  />
                )}
            </div>
          )}

          <div>
            {item.items.map((item: any) => (
              <ProductSubItems
                item={item}
                key={item.id}
                fullMode={fullMode}
                kdsLayout={kdsLayout}
                currency={currency}
              />
            ))}
          </div>
        </>
      ) : (
        <div style={{ marginLeft: '5px' }}>
          {parseFloat(item.quantity) > 1 ? `${item.quantity}x ` : '-'}
          {item.literals.name}
          {kdsLayout !== 'compact' && item.price && item.price !== '0.0' ? (
            <>
              :{` `}
              <Price
                amount={item.price}
                currency={currency}
                hideCurrency={true}
              />
            </>
          ) : null}
        </div>
      )}
    </div>
  );
};

export default ProductSubItems;