import { html, type TemplateResult } from '@design.estate/dees-element';
import type { DeesChartArea } from './component.js';
import '../../00group-utility/dees-icon/dees-icon.js';

export const renderChartArea = (component: DeesChartArea): TemplateResult => {
      return html`
        <dees-tile>
          <div slot="header" class="chartHeader">
            <span class="chartLabel">${component.label}</span>
            <button class="expandBtn" @click=${() => component.toggleFullPage()} title="${component.isFullPage ? 'Exit full page' : 'Full page'}">
              <dees-icon .icon=${component.isFullPage ? 'lucide:Minimize2' : 'lucide:Maximize2'} .iconSize=${14}></dees-icon>
            </button>
          </div>
          <div class="chartContainer"></div>
          ${component.seriesStats.length > 0 ? html`
            <div slot="footer" class="statsBar">
              ${component.seriesStats.map(s => html`
                <div class="statsSeries">
                  <span class="statsColor" style="background:${s.color}"></span>
                  <span class="statsName">${s.name}</span>
                  <span class="statsItem">latest <strong>${component.yAxisFormatter(s.latest)}</strong></span>
                  <span class="statsItem">min <strong>${component.yAxisFormatter(s.min)}</strong></span>
                  <span class="statsItem">max <strong>${component.yAxisFormatter(s.max)}</strong></span>
                  <span class="statsItem">avg <strong>${component.yAxisFormatter(s.avg)}</strong></span>
                </div>
              `)}
            </div>
          ` : ''}
        </dees-tile>
      `;
};