text: odoo.define('point_of_sale.DebugWidget', function (require) {
      'use strict';
  
      const { useState } = owl;
      const { useRef } = owl.hooks;
      const { getFileAsText } = require('point_of_sale.utils');
      const { parse } = require('web.field_utils');
      const NumberBuffer = require('point_of_sale.NumberBuffer');
      const PosComponent = require('point_of_sale.PosComponent');
      const Registries = require('point_of_sale.Registries');
  
      class DebugWidget extends PosComponent {
          constructor() {
              super(...arguments);
              this.state = useState({
                  barcodeInput: '',
                  weightInput: '',
                  isPaidOrdersReady: false,
                  isUnpaidOrdersReady: false,
                  buffer: NumberBuffer.get(),
              });
  
              // NOTE: Perhaps this can still be improved.
              // What we do here is loop thru the `event` elements
              // then we assign animation that happens when the event is triggered
              // in the proxy. E.g. if open_cashbox is sent, the open_cashbox element
              // changes color from '#6CD11D' to '#1E1E1E' for a duration of 2sec.
              this.eventElementsRef = {};
              this.animations = {};
              for (let eventName of ['open_cashbox', 'print_receipt', 'scale_read']) {
                  this.eventElementsRef[eventName] = useRef(eventName);
                  this.env.pos.proxy.add_notification(
                      eventName,
                      (() => {
                          if (this.animations[eventName]) {
                              this.animations[eventName].cancel();
                          }
                          const eventElement = this.eventElementsRef[eventName].el;
                          eventElement.style.backgroundColor = '#6CD11D';
                          this.animations[eventName] = eventElement.animate(
                              { backgroundColor: ['#6CD11D', '#1E1E1E'] },
                              2000
                          );
                      }).bind(this)
                  );
              }
          }
          mounted() {
              NumberBuffer.on('buffer-update', this, this._onBufferUpdate);
          }
          willUnmount() {
              NumberBuffer.off('buffer-update', this, this._onBufferUpdate);
          }
          toggleWidget() {
              this.state.isShown = !this.state.isShown;
          }
          setWeight() {
              var weightInKg = parse.float(this.state.weightInput);
              if (!isNaN(weightInKg)) {
                  this.env.pos.proxy.debug_set_weight(weightInKg);
              }
          }
          resetWeight() {
              this.state.weightInput = '';
              this.env.pos.proxy.debug_reset_weight();
          }
          barcodeScan() {
              this.env.pos.barcode_reader.scan(this.state.barcodeInput);
          }
          barcodeScanEAN() {
              const ean = this.env.pos.barcode_reader.barcode_parser.sanitize_ean(
                  this.state.barcodeInput || '0'
              );
              this.state.barcodeInput = ean;
              this.env.pos.barcode_reader.scan(ean);
          }
          async deleteOrders() {
              const { confirmed } = await this.showPopup('ConfirmPopup', {
                  title: this.env._t('Delete Paid Orders ?'),
                  body: this.env._t(
                      'This operation will permanently destroy all paid orders from the local storage. You will lose all the data. This operation cannot be undone.'
                  ),
              });
              if (confirmed) {
                  this.env.pos.db.remove_all_orders();
                  this.env.pos.set_synch('connected', 0);
              }
          }
          async deleteUnpaidOrders() {
              const { confirmed } = await this.showPopup('ConfirmPopup', {
                  title: this.env._t('Delete Unpaid Orders ?'),
                  body: this.env._t(
                      'This operation will destroy all unpaid orders in the browser. You will lose all the unsaved data and exit the point of sale. This operation cannot be undone.'
                  ),
              });
              if (confirmed) {
                  this.env.pos.db.remove_all_unpaid_orders();
                  window.location = '/';
              }
          }
          _createBlob(contents) {
              if (typeof contents !== 'string') {
                  contents = JSON.stringify(contents, null, 2);
              }
              return new Blob([contents]);
          }
          // IMPROVEMENT: Duplicated codes for downloading paid and unpaid orders.
          // The implementation can be better.
          preparePaidOrders() {
              try {
                  this.paidOrdersBlob = this._createBlob(this.env.pos.export_paid_orders());
                  this.state.isPaidOrdersReady = true;
              } catch (error) {
                  console.warn(error);
              }
          }
          get paidOrdersFilename() {
              return `${this.env._t('paid orders')} ${moment().format('YYYY-MM-DD-HH-mm-ss')}.json`;
          }
          get paidOrdersURL() {
              var URL = window.URL || window.webkitURL;
              return URL.createObjectURL(this.paidOrdersBlob);
          }
          prepareUnpaidOrders() {
              try {
                  this.unpaidOrdersBlob = this._createBlob(this.env.pos.export_unpaid_orders());
                  this.state.isUnpaidOrdersReady = true;
              } catch (error) {
                  console.warn(error);
              }
          }
          get unpaidOrdersFilename() {
              return `${this.env._t('unpaid orders')} ${moment().format('YYYY-MM-DD-HH-mm-ss')}.json`;
          }
          get unpaidOrdersURL() {
              var URL = window.URL || window.webkitURL;
              return URL.createObjectURL(this.unpaidOrdersBlob);
          }
          async importOrders(event) {
              const file = event.target.files[0];
              if (file) {
                  const report = this.env.pos.import_orders(await getFileAsText(file));
                  await this.showPopup('OrderImportPopup', { report });
              }
          }
          refreshDisplay() {
              this.env.pos.proxy.message('display_refresh', {});
          }
          _onBufferUpdate(buffer) {
              this.state.buffer = buffer;
          }
          get bufferRepr() {
              return `"${this.state.buffer}"`;
          }
      }
      DebugWidget.template = 'DebugWidget';
  
      Registries.Component.add(DebugWidget);
  
      return DebugWidget;
  });
  