/**
 * Web Component wrapper for FileUpload
 * Custom element: <hf-file-upload>
 *
 * @generated by scripts/generate-wc-components.ts
 * DO NOT EDIT MANUALLY
 */

import React from 'react';
import { createRoot } from 'react-dom/client';
import { FileUpload } from '../components/molecules/files/FileUpload';
import { parseAttr, parseValue, type PropDefs } from './_shared';

/**
 * Event wrapper that dispatches custom DOM events
 */
function createEventDispatcher(element: HTMLElement) {
  return {
    onFilesSelected: (value: unknown) => {
      const CustomEventConstructor =
        element.ownerDocument.defaultView?.CustomEvent ?? CustomEvent;
      element.dispatchEvent(new CustomEventConstructor('files-selected', {
        detail: value,
        bubbles: true,
        composed: true
      }));
    },
    onFileRemove: (fileId: string) => {
      const CustomEventConstructor =
        element.ownerDocument.defaultView?.CustomEvent ?? CustomEvent;
      element.dispatchEvent(new CustomEventConstructor('file-remove', {
        detail: fileId,
        bubbles: true,
        composed: true
      }));
    },
    onFileCancel: (fileId: string) => {
      const CustomEventConstructor =
        element.ownerDocument.defaultView?.CustomEvent ?? CustomEvent;
      element.dispatchEvent(new CustomEventConstructor('file-cancel', {
        detail: fileId,
        bubbles: true,
        composed: true
      }));
    },
    onFileRetry: (fileId: string) => {
      const CustomEventConstructor =
        element.ownerDocument.defaultView?.CustomEvent ?? CustomEvent;
      element.dispatchEvent(new CustomEventConstructor('file-retry', {
        detail: fileId,
        bubbles: true,
        composed: true
      }));
    },
    onUploadUrlChange: (url: string) => {
      const CustomEventConstructor =
        element.ownerDocument.defaultView?.CustomEvent ?? CustomEvent;
      element.dispatchEvent(new CustomEventConstructor('upload-url-change', {
        detail: url,
        bubbles: true,
        composed: true
      }));
    },
    onUrlUpload: (url: string) => {
      const CustomEventConstructor =
        element.ownerDocument.defaultView?.CustomEvent ?? CustomEvent;
      element.dispatchEvent(new CustomEventConstructor('url-upload', {
        detail: url,
        bubbles: true,
        composed: true
      }));
    },
    onSelectedFileIdsChange: (value: unknown) => {
      const CustomEventConstructor =
        element.ownerDocument.defaultView?.CustomEvent ?? CustomEvent;
      element.dispatchEvent(new CustomEventConstructor('selected-file-ids-change', {
        detail: value,
        bubbles: true,
        composed: true
      }));
    },
    onFilesDownload: (value: unknown) => {
      const CustomEventConstructor =
        element.ownerDocument.defaultView?.CustomEvent ?? CustomEvent;
      element.dispatchEvent(new CustomEventConstructor('files-download', {
        detail: value,
        bubbles: true,
        composed: true
      }));
    }
  };
}

/**
 * Wrapper component that connects React events to DOM custom events
 */
function FileUploadWrapper(props: React.ComponentProps<typeof FileUpload> & { _hostElement?: HTMLElement }) {
  const { _hostElement, ...restProps } = props;

  const eventHandlers = React.useMemo(() => {
    if (!_hostElement) return {};
    return createEventDispatcher(_hostElement);
  }, [_hostElement]);

  return React.createElement(FileUpload, { ...restProps, ...eventHandlers });
}

/**
 * Prop type definitions for attribute parsing
 */
const propTypes: PropDefs = {
    files: 'json',
    areaProps: 'json',
    helpText: 'json',
    fileView: 'string',
    uploadFromUrl: 'boolean',
    uploadUrl: 'string',
    defaultUploadUrl: 'string',
    uploadUrlPlaceholder: 'string',
    selectedFileIds: 'json',
    defaultSelectedFileIds: 'json'
};

class FileUploadWC extends HTMLElement {
  private _root: ReturnType<typeof createRoot> | null = null;
  private _childrenContainer: HTMLDivElement | null = null;
  private _props: Record<string, unknown> = {};
  private _initialized = false;

  connectedCallback() {
    setTimeout(() => this._initialize(), 0);
  }

  private _initialize() {
    if (this._initialized) return;
    this._initialized = true;

    const originalChildren: Node[] = [];
    for (const child of Array.from(this.childNodes)) {
      if (child.nodeType === Node.TEXT_NODE && !child.textContent?.trim()) {
        continue;
      }
      originalChildren.push(child);
    }

    const reactContainer = this.ownerDocument.createElement('div');
    reactContainer.style.display = 'contents';

    this._childrenContainer = this.ownerDocument.createElement('div');
    this._childrenContainer.style.display = 'contents';

    originalChildren.forEach((child) => this._childrenContainer!.appendChild(child));

    while (this.firstChild) this.removeChild(this.firstChild);
    this.appendChild(reactContainer);

    this._root = createRoot(reactContainer);
    this._render();
  }

  disconnectedCallback() {
    this._root?.unmount();
    this._root = null;
  }

  attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null) {
    this._render();
  }

  static get observedAttributes() {
    return Object.keys(propTypes).map((prop) =>
      prop.replace(/([A-Z])/g, '-$1').toLowerCase(),
    );
  }

  _setProp(name: string, value: unknown) {
    const propType = propTypes[name] || 'string';
    this._props[name] = parseValue(value, propType);
    this._render();
  }

  _getProp(name: string): unknown {
    if (name in this._props) {
      return this._props[name];
    }
    const attrName = name.replace(/([A-Z])/g, '-$1').toLowerCase();
    const propType = propTypes[name] || 'string';
    return parseAttr(this.getAttribute(attrName), propType);
  }

  private _render() {
    if (!this._root) return;

    const props: Record<string, unknown> = {};
    for (const [propName, propType] of Object.entries(propTypes)) {
      if (propName in this._props) {
        props[propName] = this._props[propName];
      } else {
        const attrName = propName.replace(/([A-Z])/g, '-$1').toLowerCase();
        props[propName] = parseAttr(this.getAttribute(attrName), propType);
      }
    }

    const element = React.createElement(
      FileUploadWrapper,
      { ...props, _hostElement: this },
    );

    this._root.render(element);
  }
}

for (const propName of Object.keys(propTypes)) {
  Object.defineProperty(FileUploadWC.prototype, propName, {
    get() {
      return this._getProp(propName);
    },
    set(value: unknown) {
      this._setProp(propName, value);
    },
    enumerable: true,
    configurable: true,
  });
}

if (typeof customElements !== 'undefined' && !customElements.get('hf-file-upload')) {
  customElements.define('hf-file-upload', FileUploadWC);
}

export { FileUploadWC };
export default FileUploadWC;