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

@customElement('arx-fieldset')
export class StyledFieldset extends LitElement {
  @property() legend = '';
  @property({ type: Boolean }) disabled = false;
  @property() variant = 'default'; // default, primary, secondary, accent

  static override styles = css`
    :host {
      display: block;
      width: 100%;
      margin-bottom: 24px;
    }

    .fieldset-container {
      background: var(--color-base-100);
      border: var(--border) solid var(--color-base-300);
      border-radius: var(--radius-box);
      padding: 24px;
      position: relative;
      box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
          calc(var(--depth) * 4px)
          oklch(from var(--color-base-content) l c h / 0.1),
        calc(var(--depth) * -2px) calc(var(--depth) * -2px)
          calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.5);
      transition: all 0.25s ease;
    }

    :host([variant="primary"]) .fieldset-container {
      border-left: calc(var(--border) * 3) solid var(--color-primary);
    }

    :host([variant="secondary"]) .fieldset-container {
      border-left: calc(var(--border) * 3) solid var(--color-secondary);
    }

    :host([variant="accent"]) .fieldset-container {
      border-left: calc(var(--border) * 3) solid var(--color-accent);
    }

    .legend {
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--color-base-100);
      border: var(--border) solid var(--color-base-300);
      padding: 0 10px;
      font-size: 14px;
      font-weight: 600;
      color: var(--color-base-content);
      border-radius: calc(var(--radius-selector) / 2);
      transition: all 0.25s ease;
    }

    :host([variant="primary"]) .legend {
      color: var(--color-primary);
    }

    :host([variant="secondary"]) .legend {
      color: var(--color-secondary);
    }

    :host([variant="accent"]) .legend {
      color: var(--color-accent);
    }

    .fieldset-content {
      padding-top: 8px;
    }

    :host([disabled]) .fieldset-container {
      opacity: 0.7;
      cursor: not-allowed;
      box-shadow: calc(var(--depth) * 1px) calc(var(--depth) * 1px)
          calc(var(--depth) * 2px)
          oklch(from var(--color-base-content) l c h / 0.05),
        calc(var(--depth) * -1px) calc(var(--depth) * -1px)
          calc(var(--depth) * 2px) oklch(from var(--color-base-100) l c h / 0.3);
    }

    :host([disabled]) .legend {
      opacity: 0.7;
    }

    :host(:not([disabled])) .fieldset-container:hover {
      box-shadow: calc(var(--depth) * 3px) calc(var(--depth) * 3px)
          calc(var(--depth) * 6px)
          oklch(from var(--color-base-content) l c h / 0.15),
        calc(var(--depth) * -3px) calc(var(--depth) * -3px)
          calc(var(--depth) * 6px) oklch(from var(--color-base-100) l c h / 0.6);
    }

    :host(:not([disabled])) .fieldset-container:focus-within {
      border-color: var(--color-accent);
      box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
          calc(var(--depth) * 4px)
          oklch(from var(--color-base-content) l c h / 0.1),
        calc(var(--depth) * -2px) calc(var(--depth) * -2px)
          calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.5),
        0 0 0 2px oklch(from var(--color-accent) l c h / 0.2);
    }

    :host(:not([disabled])) .fieldset-container:focus-within .legend {
      color: var(--color-accent);
    }
  `;

  override render() {
    return html`
      <div class="fieldset-container" ?disabled=${this.disabled}>
        ${when(this.legend, () => html`<div class="legend">${this.legend}</div>`)}
        <div class="fieldset-content">
          <slot></slot>
        </div>
      </div>
    `;
  }
}
