import * as plugins from './00plugins.js';
import { demoFunc } from './dees-table.demo.js';
import { cssGeistFontFamily } from './00fonts.js';
import {
  customElement,
  html,
  DeesElement,
  property,
  type TemplateResult,
  cssManager,
  css,
  directives,
} from '@design.estate/dees-element';

import { DeesContextmenu } from './dees-contextmenu.js';

import * as domtools from '@design.estate/dees-domtools';
import { type TIconKey } from './dees-icon.js';

declare global {
  interface HTMLElementTagNameMap {
    'dees-table': DeesTable<any>;
  }
}

// interfaces
export interface ITableAction<T = any> {
  name: string;
  iconName: TIconKey;
  /**
   * the table behaviour to use for this action
   * e.g. upload: allows to upload files to the table
   */
  useTableBehaviour?: 'upload' | 'cancelUpload' | 'none';
  /**
   * the type of the action
   */
  type: (
    | 'inRow'
    | 'contextmenu'
    | 'doubleClick'
    | 'footer'
    | 'header'
    | 'preview'
    | 'keyCombination'
  )[];
  /**
   * allows to check if the action is relevant for the given item
   * @param itemArg
   * @returns
   */
  actionRelevancyCheckFunc?: (itemArg: T) => boolean;
  /**
   * the actual action function implementation
   * @param itemArg
   * @returns
   */
  actionFunc: (actionDataArg: ITableActionDataArg<T>) => Promise<any>;
}

export interface ITableActionDataArg<T> {
  item: T;
  table: DeesTable<T>;
}

export type TDisplayFunction<T = any> = (itemArg: T) => object;

// the table implementation
@customElement('dees-table')
export class DeesTable<T> extends DeesElement {
  public static demo = demoFunc;

  // INSTANCE
  @property({
    type: String,
  })
  public heading1: string = 'heading 1';

  @property({
    type: String,
  })
  public heading2: string = 'heading 2';

  @property({
    type: Array,
  })
  public data: T[] = [];

  // dees-form compatibility -----------------------------------------
  @property({
    type: String,
  })
  public key: string;

  @property({
    type: String,
  })
  public label: string;

  @property({
    type: Boolean,
  })
  public disabled: boolean = false;

  @property({
    type: Boolean,
  })
  public required: boolean = false;

  get value() {
    return this.data;
  }
  set value(_valueArg) {}
  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject<DeesTable<T>>();
  // end dees-form compatibility -----------------------------------------

  /**
   * What does a row of data represent?
   */
  @property({
    type: String,
    reflect: true,
  })
  public dataName: string;


  @property({
    type: Boolean,
  })
  searchable: boolean = true;

  @property({
    type: Array,
  })
  public dataActions: ITableAction<T>[] = [];

  @property({
    attribute: false,
  })
  public displayFunction: TDisplayFunction = (itemArg: T) => itemArg as any;

  @property({
    attribute: false,
  })
  public reverseDisplayFunction: (itemArg: any) => T = (itemArg: any) => itemArg as T;

  @property({
    type: Object,
  })
  public selectedDataRow: T;

  @property({
    type: Array,
  })
  public editableFields: string[] = [];

  @property({
    type: Boolean,
    reflect: true,
    attribute: 'show-vertical-lines'
  })
  public showVerticalLines: boolean = false;

  @property({
    type: Boolean,
    reflect: true,
    attribute: 'show-horizontal-lines'
  })
  public showHorizontalLines: boolean = false;

  @property({
    type: Boolean,
    reflect: true,
    attribute: 'show-grid'
  })
  public showGrid: boolean = true;

  public files: File[] = [];
  public fileWeakMap = new WeakMap();

  public dataChangeSubject = new domtools.plugins.smartrx.rxjs.Subject();

  constructor() {
    super();
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        width: 100%;
      }

      .mainbox {
        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
        font-family: ${cssGeistFontFamily};
        font-weight: 400;
        font-size: 14px;
        display: block;
        width: 100%;
        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        border-radius: 8px;
        overflow: hidden;
        cursor: default;
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 24px;
        min-height: 64px;
        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
      }

      .headingContainer {
        flex: 1;
      }

      .heading {
        line-height: 1.5;
      }

      .heading1 {
        font-size: 18px;
        font-weight: 600;
        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
        letter-spacing: -0.025em;
      }
      
      .heading2 {
        font-size: 14px;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
        margin-top: 2px;
      }

      .headingSeparation {
        display: none;
      }

      .headerActions {
        user-select: none;
        display: flex;
        flex-direction: row;
        gap: 8px;
      }
      
      .headerAction {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        font-size: 14px;
        font-weight: 500;
        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
        background: transparent;
        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.15s ease;
      }

      .headerAction:hover {
        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
      }

      .headerAction dees-icon {
        width: 14px;
        height: 14px;
      }

      .searchGrid {
        display: grid;
        grid-gap: 16px;
        grid-template-columns: 1fr 200px;
        padding: 16px 24px;
        background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(0 0% 3.9%)')};
        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        transition: all 0.2s ease;
      }

      .searchGrid.hidden {
        height: 0px;
        opacity: 0;
        overflow: hidden;
        padding: 0px 24px;
        border-bottom-width: 0px;
      }

      table {
        width: 100%;
        caption-side: bottom;
        font-size: 14px;
        border-collapse: separate;
        border-spacing: 0;
      }
      
      .noDataSet {
        padding: 48px 24px;
        text-align: center;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
      }
      
      thead {
        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
      }
      
      tbody tr {
        transition: background-color 0.15s ease;
        position: relative;
      }
      
      /* Default horizontal lines (bottom border only) */
      tbody tr {
        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
      }
      
      tbody tr:last-child {
        border-bottom: none;
      }
      
      /* Full horizontal lines when enabled */
      :host([show-horizontal-lines]) tbody tr {
        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
      }
      
      :host([show-horizontal-lines]) tbody tr:first-child {
        border-top: none;
      }
      
      :host([show-horizontal-lines]) tbody tr:last-child {
        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
      }
      
      tbody tr:hover {
        background: ${cssManager.bdTheme('hsl(210 40% 96.1% / 0.5)', 'hsl(0 0% 14.9% / 0.5)')};
      }
      
      /* Column hover effect for better traceability */
      td {
        position: relative;
      }
      
      td::after {
        content: '';
        position: absolute;
        top: -1000px;
        bottom: -1000px;
        left: 0;
        right: 0;
        background: ${cssManager.bdTheme('hsl(210 40% 96.1% / 0.3)', 'hsl(0 0% 14.9% / 0.3)')};
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
        z-index: -1;
      }
      
      td:hover::after {
        opacity: 1;
      }
      
      /* Grid mode - shows both vertical and horizontal lines */
      :host([show-grid]) th {
        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        border-left: none;
        border-top: none;
      }
      
      :host([show-grid]) td {
        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        border-left: none;
        border-top: none;
      }
      
      :host([show-grid]) th:first-child,
      :host([show-grid]) td:first-child {
        border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
      }
      
      :host([show-grid]) tbody tr:first-child td {
        border-top: none;
      }
      
      tbody tr.selected {
        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
      }

      tbody tr.hasAttachment {
        background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.1)', 'hsl(142.1 76.2% 36.3% / 0.1)')};
      }

      th {
        height: 48px;
        padding: 12px 24px;
        text-align: left;
        font-weight: 500;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
        letter-spacing: -0.01em;
      }
      
      :host([show-vertical-lines]) th {
        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
      }
      
      td {
        padding: 12px 24px;
        vertical-align: middle;
        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
      }
      
      :host([show-vertical-lines]) td {
        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
      }
      
      th:first-child,
      td:first-child {
        padding-left: 24px;
      }
      
      th:last-child,
      td:last-child {
        padding-right: 24px;
      }
      
      :host([show-vertical-lines]) th:last-child,
      :host([show-vertical-lines]) td:last-child {
        border-right: none;
      }
      
      .innerCellContainer {
        position: relative;
        min-height: 24px;
        line-height: 24px;
      }
      td input {
        position: absolute;
        top: 4px;
        bottom: 4px;
        left: 20px;
        right: 20px;
        width: calc(100% - 40px);
        height: calc(100% - 8px);
        padding: 0 12px;
        outline: none;
        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        border-radius: 6px;
        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        transition: all 0.15s ease;
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      }
      
      td input:focus {
        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
        outline: 2px solid transparent;
        outline-offset: 2px;
        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.2)', 'hsl(217.2 91.2% 59.8% / 0.2)')};
      }
      .actionsContainer {
        display: flex;
        flex-direction: row;
        gap: 4px;
      }
      
      .action {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
        cursor: pointer;
        transition: all 0.15s ease;
      }

      .action:hover {
        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
      }

      .action:active {
        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 11.8%)')};
      }
      
      .action dees-icon {
        width: 16px;
        height: 16px;
      }

      .footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 52px;
        padding: 0 24px;
        font-size: 14px;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
      }

      .tableStatistics {
        font-weight: 500;
      }

      .footerActions {
        display: flex;
        gap: 8px;
      }

      .footerActions .footerAction {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        font-weight: 500;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
        border-radius: 6px;
        cursor: pointer;
        user-select: none;
        transition: all 0.15s ease;
      }

      .footerActions .footerAction:hover {
        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
      }

      .footerActions .footerAction dees-icon {
        width: 14px;
        height: 14px;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="mainbox">
        <!-- the heading part -->
        <div class="header">
          <div class="headingContainer">
            <div class="heading heading1">${this.label || this.heading1}</div>
            <div class="heading heading2">${this.heading2}</div>
          </div>
          <div class="headerActions">
            ${directives.resolveExec(async () => {
              const resultArray: TemplateResult[] = [];
              for (const action of this.dataActions) {
                if (!action.type.includes('header')) continue;
                resultArray.push(
                  html`<div
                    class="headerAction"
                    @click=${() => {
                      action.actionFunc({
                        item: this.selectedDataRow,
                        table: this,
                      });
                    }}
                  >
                    ${action.iconName
                      ? html`<dees-icon .iconSize=${14} .iconFA=${action.iconName}></dees-icon>
                          ${action.name}`
                      : action.name}
                  </div>`
                );
              }
              return resultArray;
            })}
          </div>
        </div>
        <div class="headingSeparation"></div>
        <div class="searchGrid hidden">
          <dees-input-text
            .label=${'lucene syntax search'}
            .description=${`
              You can use the lucene syntax to search for data, e.g.:
              
              \`\`\`
              name: "john" AND age: 18
              \`\`\`
              
            `}
          ></dees-input-text>
          <dees-input-multitoggle
            .label=${'search mode'}
            .options=${['table', 'data', 'server']}
            .selectedOption=${'table'}
            .description=${`
              There are three basic modes:
              
              * table: only searches data already in the table
              * data: searches original data, ignoring table transforms
              * server: searches data on the server
              
            `}
          ></dees-input-multitoggle>
        </div>

        <!-- the actual table -->
        <style></style>
        ${this.data.length > 0
          ? (() => {
              // Only pick up the keys from the first transformed data object
              // as all data objects are assumed to have the same structure
              const firstTransformedItem = this.displayFunction(this.data[0]);
              const headings: string[] = Object.keys(firstTransformedItem);
              return html`
                <table>
                  <thead>
                    <tr>
                      ${headings.map(
                        (headingArg) => html`
                          <th>${headingArg}</th>
                        `
                      )}
                      ${(() => {
                        if (this.dataActions && this.dataActions.length > 0) {
                          return html`
                            <th>Actions</th>
                          `;
                        }
                      })()}
                    </tr>
                  </thead>
                  <tbody>
                  ${this.data.map((itemArg) => {
                    const transformedItem = this.displayFunction(itemArg);
                    const getTr = (elementArg: HTMLElement): HTMLElement => {
                      if (elementArg.tagName === 'TR') {
                        return elementArg;
                      } else {
                        return getTr(elementArg.parentElement);
                      }
                    };
                    return html`
                      <tr
                        @click=${() => {
                          this.selectedDataRow = itemArg;
                        }}
                        @dragenter=${async (eventArg: DragEvent) => {
                          eventArg.preventDefault();
                          eventArg.stopPropagation();
                          const realTarget = getTr(eventArg.target as HTMLElement);
                          console.log('dragenter');
                          console.log(realTarget);
                          setTimeout(() => {
                            realTarget.classList.add('hasAttachment');
                          }, 0);
                        }}
                        @dragleave=${async (eventArg: DragEvent) => {
                          eventArg.preventDefault();
                          eventArg.stopPropagation();
                          const realTarget = getTr(eventArg.target as HTMLElement);
                          realTarget.classList.remove('hasAttachment');
                        }}
                        @dragover=${async (eventArg: DragEvent) => {
                          eventArg.preventDefault();
                        }}
                        @drop=${async (eventArg: DragEvent) => {
                          eventArg.preventDefault();
                          const newFiles = [];
                          for (const file of Array.from(eventArg.dataTransfer.files)) {
                            this.files.push(file);
                            newFiles.push(file);
                            this.requestUpdate();
                          }
                          const result: File[] = this.fileWeakMap.get(itemArg as object);
                          if (!result) {
                            this.fileWeakMap.set(itemArg as object, newFiles);
                          } else {
                            result.push(...newFiles);
                          }
                        }}
                        @contextmenu=${async (eventArg: MouseEvent) => {
                          DeesContextmenu.openContextMenuWithOptions(
                            eventArg,
                            this.getActionsForType('contextmenu').map((action) => {
                              const menuItem: plugins.tsclass.website.IMenuItem = {
                                name: action.name,
                                iconName: action.iconName as any,
                                action: async () => {
                                  await action.actionFunc({
                                    item: itemArg,
                                    table: this,
                                  });
                                  return null;
                                },
                              };
                              return menuItem;
                            })
                          );
                        }}
                        class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
                      >
                        ${headings.map(
                          (headingArg) => html`
                            <td
                              @dblclick=${(e: Event) => {
                                if (this.editableFields.includes(headingArg)) {
                                  this.handleCellEditing(e, itemArg, headingArg);
                                } else {
                                  const wantedAction = this.dataActions.find((actionArg) =>
                                    actionArg.type.includes('doubleClick')
                                  );
                                  if (wantedAction) {
                                    wantedAction.actionFunc({
                                      item: itemArg,
                                      table: this,
                                    });
                                  }
                                }
                              }}
                            >
                              <div class="innerCellContainer">${transformedItem[headingArg]}</div>
                            </td>
                          `
                        )}
                        ${(() => {
                          if (this.dataActions && this.dataActions.length > 0) {
                            return html`
                              <td>
                                <div class="actionsContainer">
                                  ${this.getActionsForType('inRow').map(
                                    (actionArg) => html`
                                        <div
                                          class="action"
                                          @click=${() =>
                                            actionArg.actionFunc({
                                              item: itemArg,
                                              table: this,
                                            })}
                                        >
                                          ${actionArg.iconName
                                            ? html`
                                                <dees-icon
                                                  .iconFA=${actionArg.iconName}
                                                ></dees-icon>
                                              `
                                            : actionArg.name}
                                        </div>
                                      `
                                    )}
                                </div>
                              </td>
                            `;
                          }
                        })()}
                      </tr>
                    `;
                  })}
                  </tbody>
                </table>
              `;
            })()
          : html` <div class="noDataSet">No data set!</div> `}
        <div class="footer">
          <div class="tableStatistics">
            ${this.data.length} ${this.dataName || 'data rows'} (total) |
            ${this.selectedDataRow ? '# ' + `${this.data.indexOf(this.selectedDataRow) + 1}` : `No`}
            selected
          </div>
          <div class="footerActions">
            ${directives.resolveExec(async () => {
              const resultArray: TemplateResult[] = [];
              for (const action of this.dataActions) {
                if (!action.type.includes('footer')) continue;
                resultArray.push(
                  html`<div
                    class="footerAction"
                    @click=${() => {
                      action.actionFunc({
                        item: this.selectedDataRow,
                        table: this,
                      });
                    }}
                  >
                    ${action.iconName
                      ? html`<dees-icon .iconSize=${14} .iconFA=${action.iconName}></dees-icon>
                          ${action.name}`
                      : action.name}
                  </div>`
                );
              }
              return resultArray;
            })}
          </div>
        </div>
      </div>
    `;
  }

  public async firstUpdated() {
    
  }

  public async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
    super.updated(changedProperties);
    this.determineColumnWidths();
    if (this.searchable) {
      const existing = this.dataActions.find((actionArg) => actionArg.type.includes('header') && actionArg.name === 'Search');
      if (!existing) {
        this.dataActions.unshift({
          name: 'Search',
          iconName: 'magnifyingGlass',
          type: ['header'],
          actionFunc: async () => {
            console.log('open search');
            const searchGrid = this.shadowRoot.querySelector('.searchGrid');
            searchGrid.classList.toggle('hidden');
          }
        });
        console.log(this.dataActions);
        this.requestUpdate();
      };
    }
  }

  public async determineColumnWidths() {
    const domtools = await this.domtoolsPromise;
    await domtools.convenience.smartdelay.delayFor(0);
    // Get the table element
    const table = this.shadowRoot.querySelector('table');
    if (!table) return;

    // Get the first row's cells to measure the widths
    const cells = table.rows[0].cells;

    const handleColumnByIndex = async (i: number, waitForRenderArg: boolean = false) => {
      const done = plugins.smartpromise.defer();
      const cell = cells[i];

      // Get computed width
      const width = window.getComputedStyle(cell).width;
      if (cell.textContent.includes('Actions')) {
        const neededWidth =
          this.dataActions.filter((actionArg) => actionArg.type.includes('inRow')).length * 36;
        cell.style.width = `${Math.max(neededWidth, 68)}px`;
      } else {
        cell.style.width = width;
      }
      if (waitForRenderArg) {
        requestAnimationFrame(() => {
          done.resolve();
        });
        await done.promise;
      }
    };

    if (cells[cells.length - 1].textContent.includes('Actions')) {
      await handleColumnByIndex(cells.length - 1, true);
    }

    for (let i = 0; i < cells.length; i++) {
      if (cells[i].textContent.includes('Actions')) {
        continue;
      }
      await handleColumnByIndex(i);
    }
    table.style.tableLayout = 'fixed';
  }

  getActionsForType(typeArg: ITableAction['type'][0]) {
    const actions: ITableAction[] = [];
    for (const action of this.dataActions) {
      if (!action.type.includes(typeArg)) continue;
      actions.push(action);
    }
    return actions;
  }

  async handleCellEditing(event: Event, itemArg: T, key: string) {
    await this.domtoolsPromise;
    const target = event.target as HTMLElement;
    const originalColor = target.style.color;
    target.style.color = 'transparent';
    const transformedItem = this.displayFunction(itemArg);
    const initialValue = (transformedItem[key] as unknown as string) || '';
    // Create an input element
    const input = document.createElement('input');
    input.type = 'text';
    input.value = initialValue;

    const blurInput = async (blurArg = true, saveArg = false) => {
      if (blurArg) {
        input.blur();
      }
      if (saveArg) {
        itemArg[key] = input.value as any; // Convert string to T (you might need better type casting depending on your data structure)
        this.changeSubject.next(this);
      }
      input.remove();
      target.style.color = originalColor;
      this.requestUpdate();
    };

    // When the input loses focus or the Enter key is pressed, update the data
    input.addEventListener('blur', () => {
      blurInput(false, false);
    });
    input.addEventListener('keydown', (e: KeyboardEvent) => {
      if (e.key === 'Enter') {
        blurInput(true, true); // This will trigger the blur event handler above
      }
    });

    // Replace the cell's content with the input
    target.appendChild(input);
    input.focus();
  }
}