import { define } from "../utils/define";
import { html } from "../utils/html";
import "./Checkbox.css";

export const Checkbox = define(
  class extends HTMLElement {
    // Custom element tag name
    static tag = "rshb-checkbox";

    /**
     * Custom element attributes definition
     *
     * type AttrName = string;
     * type AttrConverter<PropType = any> =(attrValue: string) => PropType;
     * type AttrsDefinition = Record<AttrName, AttrConverter>;
     */
    static props = {
      id: String,
      name: String,
      checked: Boolean,
      disabled: Boolean
    };

    /**
     * Custom element slots definition
     *
     * type SlotName = string;
     * type SlotCSSSelector = string;
     * type SlotsDefinition = Record<SlotName, SlotCSSSelector>;
     */
    static slots = {
      label: "label"
    };

    static events = {
      onClick: "click"
    };

    // Preact component used as a template (hooks could be used here to introduce some logic)
    static template = (props) =>
      html`<div class="form-check">
        <input class="form-check-input" type="checkbox" ...${props} />
        <label for=${props.id} class="form-check-label" />
      </div>`;
  }
);