import { randomID } from '../../util/helpers.js';
import { Box } from './box.js';

const updateValuesOnEventTypes = ['keyup', 'mouseup'];

export class FormElement extends Box {
  constructor(name, parentEl, opts) {
    super(name, parentEl, opts);
    this.id = opts.id ?? name;
    const { cb } = opts;
    if (cb) {
      updateValuesOnEventTypes.forEach((eventType) => this.el.addEventListener(eventType, () => {
        cb(this);
      }));
      cb(this, { initializing: true });
    }
  }
}

export class Button extends FormElement {
  constructor(name, parentEl, opts) {
    super(name, parentEl, opts);
    this.button = document.createElement('button');
    this.button.setAttribute('type', 'button');
    this.button.innerHTML = name;
    this.el.appendChild(this.button);
  }
}

export class TextField extends FormElement {
  constructor(name, parentEl, opts) {
    super(name, parentEl, opts);
    this.label = document.createElement('label');
    this.label.innerHTML = name;
    this.input = document.createElement('input');
    this.label.appendChild(this.input);
    this.el.appendChild(this.label);
  }

  get value() {
    return this.input?.value || null;
  }
}

export class TextArea extends FormElement { }

export class Form {
  constructor(document, opts = {}) {
    this.document = document;
    this.items = [];
    this.id = opts.id ?? `form_${randomID()}`;
  }

  button(opts) {
    this.items.push(new Button(opts.name, this.document.el, opts));
    return this;
  }

  textField(opts) {
    this.items.push(new TextField(opts.name, this.document.el, opts));
    return this;
  }

  textArea(opts) {
    this.items.push(new TextArea(opts.name, this.document.el, opts));
    return this;
  }
}