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

@customElement('kpi-chart-toggle')
export class KpiChartToggle extends LitElement {
  static styles = css`
    :host {
      display: block;
    }
    .chart-toggle {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
    }
    .toggle-button {
      padding: 8px 16px;
      border: 1px solid #ced4da;
      background: #fff;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.9rem;
      transition: all 0.2s;
    }
    .toggle-button:hover {
      background: #f8f9fa;
    }
    .toggle-button.active {
      background: #667eea;
      color: white;
      border-color: #667eea;
    }
  `

  @property({ type: String })
  selectedType = 'boxplot'

  @property({ type: Function })
  onTypeChange?: (type: string) => void

  private handleTypeChange(type: string) {
    this.selectedType = type
    if (this.onTypeChange) {
      this.onTypeChange(type)
    }
    this.dispatchEvent(
      new CustomEvent('type-change', {
        detail: { type },
        bubbles: true,
        composed: true
      })
    )
  }

  render() {
    return html`
      <div class="chart-toggle">
        <button
          class="toggle-button ${this.selectedType === 'boxplot' ? 'active' : ''}"
          @click=${() => this.handleTypeChange('boxplot')}
        >
          박스플롯
        </button>
        <button
          class="toggle-button ${this.selectedType === 'radar' ? 'active' : ''}"
          @click=${() => this.handleTypeChange('radar')}
        >
          레이더차트
        </button>
      </div>
    `
  }
}