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

export const renderChartArea = (component: DeesChartArea): TemplateResult => {
      return html`
        <dees-tile .heading=${component.label}>
          <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>
      `;
};