import { OrderProductProps } from '../utils/types';
import {
  MainProductNameWrapper,
  MainProductPriceWrapper,
  MainProductQuantityWrapper,
  MainProductWrapper,
} from './style';
import ProductSubItems from '../ProductSubItems';
import Loader from 'react-loaders';
import { PROCESSED, PROCESSING } from '../utils/constants';
import Price from '../Price';
import TickIcon from '../assets/TickIcon';

const OrderProduct = (props: OrderProductProps): JSX.Element => {
  const {
    line,
    fullMode = false,
    showItems = false,
    kdsFilter = '',
    kdsLayout = '',
    currency = '',
    kdsDeviceConfigs = {},
  } = props;
  const { product, quantity, price } = line;

  const isStageDone =
    (line.extra &&
      kdsDeviceConfigs &&
      kdsDeviceConfigs.KDS_STAGE_DONE &&
      line.extra[`X-${kdsDeviceConfigs.KDS_STAGE_DONE}`]) ||
    line.status === PROCESSED;

  const isProcessing =
    (line.extra &&
      kdsDeviceConfigs &&
      kdsDeviceConfigs.KDS_STAGE_DONE &&
      line?.extra[`X-${kdsDeviceConfigs.KDS_STAGE_DONE}`] !== 'DONE') ||
    (!line.extra && line.status === PROCESSING);

  const productLineItems =
    'items' in product &&
    Array.isArray(product.items) &&
    product.items.length > 0 &&
    product.items.map((item: any) => {
      showItems &&
        'items' in item &&
        Array.isArray(item.items) &&
        item.items.map((element: any) => {
          const filteredGroup = element;
          if ('items' in element && Array.isArray(element.items)) {
            const filteredItems = element.items.filter(
              (el: any) => el.extra && el.extra.KDS_FILTER === kdsFilter
            );
            filteredGroup.items = filteredItems;
            return filteredGroup;
          }
          return element;
        });

      return (
        <div key={`${item.id}-item-line`}>
          {item.literals && item.literals.name && (
            <div>{item.literals.name}</div>
          )}
          {Array.isArray(item.items) &&
            item.items.map((item: any) => (
              <ProductSubItems
                key={item.id}
                item={item}
                fullMode={fullMode}
                kdsLayout={kdsLayout}
                currency={currency}
              />
            ))}
        </div>
      );
    });

  return (
    <div>
      <MainProductWrapper>
        <MainProductQuantityWrapper>{quantity} x</MainProductQuantityWrapper>
        <MainProductNameWrapper>
          {product.literals.name}:
        </MainProductNameWrapper>
        <MainProductPriceWrapper>
          <Price amount={price} currency={currency} hideCurrency={true} />
        </MainProductPriceWrapper>
        {isProcessing && (
          <Loader
            type="ball-pulse"
            active={true}
            innerClassName="loader-active"
          />
        )}
        {isStageDone && (
          <div style={{ marginLeft: '10px' }}>
            <TickIcon />
          </div>
        )}
      </MainProductWrapper>

      <div style={{ marginLeft: '30px' }}>{productLineItems}</div>
    </div>
  );
};

export default OrderProduct;
