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';
import React from "react";
import {useTranslation} from "react-i18next";

const OrderProduct = (props: OrderProductProps): JSX.Element => {
  const {t} = useTranslation()
  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>
          {/* @ts-ignore */}
          <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>
      {line.comments && line.comments.map( comment => (
          <div style={{marginLeft: '30px'}} key={comment.id}>
            {comment && comment.comment && comment.comment !== '' && (
                <div
                    style={{
                      maxWidth: '525px',
                      height: '100%',
                      wordWrap: 'break-word',
                    }}
                >
                  <strong style={{ marginRight: '5px' }}>
                    {' '}
                    {t('OS.KDS.Card.Comment')}:
                  </strong>
                  <span>{comment.comment}</span>
                </div>
            )}
          </div>
      ))}
      <div style={{ marginLeft: '30px' }}>{productLineItems}</div>
    </div>
  );
};

export default OrderProduct;