{% from "../chart/view.njk" import dprChart %}
{% from "govuk/components/tabs/macro.njk" import govukTabs %}
{% from "govuk/components/table/macro.njk" import govukTable %}
{% from "../../_dashboards/dashboard-visualisation-no-data-message/view.njk" import dprDashboardVisNoData %}
{% from "../../_reports/report-page/report-template/report-section/report-data-table/view.njk" import dprDataTable %}

{% macro dprChartTabs(id, data) %}
  {% set chartData = data.chart %}
  {% set tableData = data.table %}
  {% set tabItems = [] %}

  {% set type = chartData.type %}
  {% set data = chartData.data %}

  {# Options #}
  {% set options = chartData.options %}

  {% if chartData %}
    {% set chartHtml %}
      {{ dprChart(id, type, data, options) }}
    {% endset -%}

    {%
      set tabContent = {
        label: type | capitalize,
        id: id + "_" + type + "_tab",
        panel: {
          html: chartHtml
        }
      }
    %}

    {% set tabItems = (tabItems.push(tabContent), tabItems) %}
  {% endif %}

  {% if tableData %}
    {% set tableHtml %}
      <div class="dpr-chart-tab-table">{{ dprDataTable(tableData) }}</div>
    {% endset %}

    {%
      set tabItems = (tabItems.push({
        label: "Table",
        id: id + "_table_tab",
        panel: {
          html: tableHtml
        }
      }), tabItems)
    %}
  {% endif %}

  {% if tabItems.length %}
    {{ govukTabs({ items: tabItems, classes: 'dpr-chart-tabs' }) }}
  {% else %}
    {{ dprDashboardVisNoData() }}
  {% endif %}
{% endmacro %}