<template>
    <div>
      <table>
        <tbody>
          <tr>
            <td v-for="(column, columnIndex) in columns" :key="columnIndex" class="wcc-column-cell">
              <ul class="wcc-law-list">
                <li
                  v-for="(law, rowIndex) in column"
                  :key="rowIndex"
                  class="wcc-law-item"
                >
                  {{ law.name }}
                </li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
<script>
  export default {
    data() {
      return {
        laws: [
          { name: 'GDPR (EU & UK)' },
          { name: 'LGPD (Brazil)' },
          { name: 'PIPEDA (Canada)' },
          { name: 'Privacy Act (Australia)' },
          { name: 'POPIA (South Africa)' },
          { name: 'nFADP (Switzerland)' },
          { name: 'PDPL (Argentina)' },
          { name: 'PDPL (Andorra)' },
          { name: 'CCPA/CPRA (California)' },
          { name: 'VCDPA (Virginia)' },
          { name: 'CTDPA (Connecticut)' },
          { name: 'CPA (Colorado)' },
          { name: 'UCPA (Utah)' },
          // Add more law objects as needed
        ],
      };
    },
    computed: {
      columns() {
        // Filter laws based on selectedLaws
        const selectedLaws = this.selectedLaws;
        let filteredLaws = this.laws;

        if (selectedLaws.length > 0) {
          filteredLaws = filteredLaws.filter(law => {
            if (selectedLaws.includes('GDPR') && selectedLaws.includes('CCPA')) {
              // Show all laws when both 'GDPR' and 'CCPA' are selected
              return true;
            } else if (
              (selectedLaws.includes('GDPR') &&
                ['GDPR (EU & UK)', 'LGPD (Brazil)', 'PIPEDA (Canada)', 'Privacy Act (Australia)', 'POPIA (South Africa)', 'nFADP (Switzerland)', 'PDPL (Argentina)', 'PDPL (Andorra)'].includes(law.name)) ||
              (selectedLaws.includes('CCPA') &&
                ['CCPA/CPRA (California)', 'VCDPA (Virginia)', 'CTDPA (Connecticut)', 'CPA (Colorado)', 'UCPA (Utah)'].includes(law.name))
            ) {
              return true;
            }
            return false;
          });
        }

        const columns = [];
        const lawsPerColumn = 3; // Number of laws per column
        let currentColumn = [];

        for (let i = 0; i < filteredLaws.length; i++) {
          if (i > 0 && i % lawsPerColumn === 0) {
            columns.push(currentColumn);
            currentColumn = [];
          }
          currentColumn.push(filteredLaws[i]);
        }

        if (currentColumn.length > 0) {
          columns.push(currentColumn);
        }

        return columns;
      },
      selectedLaws: {
          get() {
              return this.$store.state.settings.options.banners.selected;
          },
          set(value) {
              this.$store.state.settings.options.banners.selected = value;
          },
      },
    },
};
</script>

<style>
/* Hide the default list bullets */
ul.wcc-law-list {
  list-style: none;
  padding-left: 0;
}

.wcc-law-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px; /* Adjust the gap as needed */
}

.wcc-law-item {
  position: relative;
  color: black;
  margin-right: 1rem;
  font-size: 12px;
}

.wcc-law-item::before {
  content: "▪"; /* Unicode character for square bullet */
  color: #96CFA4; /* Set the color of the bullet */
  font-size: 18px;
  line-height: 16px;
}
.wcc-column-cell {
  vertical-align: top; /* Align content to the top of the cell */
}
.wcc-law-selector .wcc-app-accordion-content > .wcc-app-accordion-content-inner{
  padding: 0%;
}
.wcc-law-selector .wcc-app-accordion-content > .wcc-app-accordion-content-inner .wcc-app-box{
  margin-bottom: 0%;
}
.wcc-law-list li{
  margin-bottom: 0;
}
.wcc-law-selector-show-more .wcc-app-box{
  padding: 0%;
}
</style>