import { provide } from "@lit/context";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";

import { gridSizePxContext } from "./grid-size-context.ts";

@customElement("my-grid")
export class MyGrid extends LitElement {
  @provide({ context: gridSizePxContext })
  @property({ attribute: "grid-size-px", type: Number })
  gridSizePx = 32;

  @property()
  gridColor = "#ddd";

  @property()
  width = "100%";

  @property()
  height = "100%";

  static override styles = css`
    :host {
      display: block;
      position: relative;
    }
  `;

  protected override render() {
    return html`
      <style>
      :host {
        /* Dotted grid CSS inspired by: https://stackoverflow.com/a/55364821 */
        background-image: radial-gradient(circle at 1px 1px, ${this
        .gridColor} 1px, transparent 0);
        background-size: ${this.gridSizePx}px ${this.gridSizePx}px;
        height: ${this.height};
        width: ${this.width};
      }
      </style>
      <slot></slot>
    `;
  }
}