import { LitElement, html, css, type TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';
import { property } from 'lit/decorators/property.js';

@customElement('consentsoftware-mainselection')
export class ConsentsoftwareMainSelection extends LitElement {
  public static demo = () => html`<consentsoftware-mainselection></consentsoftware-mainselection>`;

  @property({ type: Boolean })
  public required = false;

  @property({ type: Boolean })
  public selected = false;

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

    .maincontainer {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }

    .itemBox {
      padding: 16px;
      text-align: center;
      border-right: 1px solid;
      border-image: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%) 1;
    }
    .itemBox:last-child {
      border-right: none;
    }
  `;

  constructor() {
    super();
  }

  public render(): TemplateResult {
    return html`
      <div class="maincontainer">
        <div class="itemBox">
          <consentsoftware-toggle required>Required</consentsoftware-toggle>
        </div>
        <div class="itemBox">
          <consentsoftware-toggle>Preferences</consentsoftware-toggle>
        </div>
        <div class="itemBox">
          <consentsoftware-toggle>Statistics</consentsoftware-toggle>
        </div>
        <div class="itemBox">
          <consentsoftware-toggle>Marketing</consentsoftware-toggle>
        </div>
      </div>
    `;
  }

  public async getResults(mouseEvent) {}
}