import {property} from "lit/decorators.js";
import {FormElementInterface} from "@supersoniks/concorde/core/mixins/FormElement";
import {MixinArgsType} from "../_types/types";

type Constructor<T> = new (...args: MixinArgsType[]) => T;
type Type =
  | "button"
  | "checkbox"
  | "color"
  | "date"
  | "datetime-local"
  | "email"
  | "file"
  | "hidden"
  | "image"
  | "month"
  | "number"
  | "password"
  | "radio"
  | "range"
  | "reset"
  | "search"
  | "submit"
  | "tel"
  | "text"
  | "time"
  | "url"
  | "week";
const Form = <T extends Constructor<FormElementInterface>>(superClass: T) => {
  class FormInput extends superClass {
    constructor(...args: MixinArgsType[]) {
      super();
      args;
    }
    validateFormElement() {
      const input: HTMLInputElement = this.shadowRoot?.querySelector("input") as HTMLInputElement;
      if (!input || input.checkValidity()) return;
      const formPublisher = this.getFormPublisher();
      if (formPublisher) formPublisher.isFormValid = false;
      input.reportValidity();
    }
    @property() forceAutoFill = false;
    /**
     * Le type De l'input, comme en html cependant tous les types ne sont pas actuellements compatibles en raison du style en vigueur
     * On peut essayer text, date, color, email par exemple, mais pas radio/checkbox/range a priori
     */
    _type: Type = "text";
    @property({type: String}) set type(value) {
      if (this.hasAttribute("type") && !this.forceAutoFill) value = this.getAttribute("type") as Type;
      this._type = value;
      this.requestUpdate();
    }
    get type() {
      return this._type;
    }
    _description?: string;
    @property() get description(): string | undefined {
      return this._description;
    }
    set description(value) {
      if (this.hasAttribute("description") && !this.forceAutoFill) value = this.getAttribute("description") as string;
      this._description = value;
      this.requestUpdate();
    }
    _label?: string;
    @property() get label(): string | undefined {
      return this._label;
    }
    set label(value) {
      if (this.hasAttribute("label") && !this.forceAutoFill) value = this.getAttribute("label") as string;
      this._label = value;
      this.requestUpdate();
    }
    @property({type: String, reflect: true}) status: "default" | "success" | "error" | "warning" | "info" = "default";
    @property({type: Number}) tabindex?: number;
    @property({type: String}) autocomplete?:
      | "off"
      | "on"
      | "name"
      | "honorific-prefix"
      | "given-name"
      | "additional-name"
      | "family-name"
      | "honorific-suffix"
      | "nickname"
      | "email"
      | "username"
      | "new-password"
      | "current-password"
      | "one-time-code"
      | "organization-title"
      | "organization"
      | "street-address"
      | "address-line1"
      | "address-line2"
      | "address-line3"
      | "address-level4"
      | "address-level3"
      | "address-level2"
      | "address-level1"
      | "country"
      | "country-name"
      | "postal-code"
      | "cc-name"
      | "cc-given-name"
      | "cc-additional-name"
      | "cc-family-name"
      | "cc-number"
      | "cc-exp"
      | "cc-exp-month"
      | "cc-exp-year"
      | "cc-csc"
      | "cc-type"
      | "transaction-currency"
      | "transaction-amount"
      | "language"
      | "bday"
      | "bday-day"
      | "bday-month"
      | "bday-year"
      | "sex"
      | "tel"
      | "tel-country-code"
      | "tel-national"
      | "tel-area-code"
      | "tel-local"
      | "tel-extension"
      | "impp"
      | "url"
      | "photo";
  }

  return FormInput;
};
export default Form;