<template>
  <div>
    <div class="flex flex-col">
      <div class="-my-2">
        <div class="py-2 align-middle inline-block min-w-full">
          <div class="">
            <table :class="columnData ? 'divide-y divide-gray-200' : ''" class="min-w-full">
              <thead class="table w-full table-fixed">
                <tr v-if="columnData && columnData.length">
                  <th v-if="enableSelection" class="px-2 py-3 sticky top-0 z-10 bg-gray-100">
                    <c-checkbox @onChange="changeAllValues"></c-checkbox>
                  </th>
                  <th
                    v-for="(column, index) in columnData"
                    :key="index"
                    scope="col"
                    class="px-2 py-3 text-left text-sm font-medium text-gray-500 sticky top-0 z-10 bg-gray-100"
                  >
                    {{ column }}
                  </th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200 max-h-96 block overflow-y-auto">
                <tr
                  v-for="(row, index) in rowRecords"
                  @click="$emit('rowClick', index)"
                  :key="row.index"
                  class="align-top table w-full table-fixed"
                  :class="[
                    `${selectedRow && index === selectedIndex ? 'bg-indigo-100' : ''}`,
                    `${disabledRow ? 'opacity-40 pointer-events-none' : ''}`,
                  ]"
                >
                  <td
                    v-for="(record, index) in row"
                    :key="index"
                    class="px-2 whitespace-nowrap text-sm text-gray-900"
                    :class="columnClasses"
                  >
                    <c-checkbox
                      v-if="enableSelection && record.isSelected"
                      :value="record.isSelected.value"
                    ></c-checkbox>
                    <p v-else-if="record.tag">
                      <c-tag :label="record.tag.label" :color="record.tag.color"></c-tag>
                    </p>
                    <p v-else-if="record.avatar">
                      <c-avatar
                        :image="record.avatar.image"
                        :rounded="record.avatar.rounded"
                        :size="record.avatar.size"
                        :name="record.avatar.name"
                        :description="record.avatar.description"
                      ></c-avatar>
                    </p>
                    <p v-else-if="record.secondary" class="text-gray-500">
                      {{ record.secondary.label }}
                    </p>
                    <p v-else-if="record.icon">
                      <c-icon
                        :type="record.icon.type"
                        :class="record.icon.class"
                        :name="record.icon.name"
                      ></c-icon>
                    </p>
                    <p v-else-if="record.linkLabel">
                      <a
                        href="#"
                        class="flex block text-sm text-indigo-600 hover:underline"
                        @click.prevent="action"
                      >
                        {{ record.linkLabel.label }}
                      </a>
                    </p>
                    <p v-else-if="record.switch">
                      <c-switch :value="record.switch.value"></c-switch>
                    </p>
                    <div v-else-if="record.selectpicker">
                      <c-select
                        :placeholder="record.selectpicker.placeholder"
                        :options="record.selectpicker.options"
                        :dropdownClass="record.selectpicker.dropdownClass"
                      ></c-select>
                    </div>
                    <div v-else-if="record.stackedList">
                      <c-stacked-list
                        :listItems="record.stackedList.items"
                        :divider="record.stackedList.divider"
                      ></c-stacked-list>
                    </div>
                    <div v-else-if="record.colorText">
                      <p :class="record.colorText.class">
                        {{ record.colorText.value }}
                      </p>
                      <p v-if="record.colorText.description" class="text-gray-500">
                        {{ record.colorText.description }}
                      </p>
                    </div>
                    <div v-else>
                      <p>{{ record.record.value }}</p>
                      <div class="flex" v-if="record.record.description">
                        <slot></slot>
                        <p class="text-gray-500">
                          {{ record.record.description }}
                        </p>
                      </div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CTag from "../CTag/CTag.vue";
import CIcon from "../CIcon/CIcon.vue";
import CSwitch from "../CSwitch/CSwitch.vue";
import CCheckbox from "../CCheckbox/CCheckbox.vue";
import CAvatar from "../CAvatar/CAvatar.vue";
import CSelect from "../CSelect/CSelect.vue";
import CStackedList from "../CStackedList/CStackedList.vue";
export default {
  name: "CBasicTable",
  components: {
    CTag,
    CIcon,
    CSwitch,
    CCheckbox,
    CAvatar,
    CStackedList,
    CSelect,
  },
  props: {
    columnData: {
      type: Array,
    },
    rowRecords: {
      type: Array,
    },
    enableSelection: {
      type: Boolean,
    },
    selectedRow: {
      type: Boolean,
    },
    disabledRow: {
      type: Boolean,
    },
    rowClick: {
      type: Function,
    },
    selectedIndex: {
      type: String,
    },
    columnClasses: {
      type: String,
    },
  },
  data() {
    return {};
  },
  methods: {
    action() {
      this.$emit("linkAction");
    },
    changeAllValues(value) {
      this.rowRecords.forEach(function (row) {
        row.forEach(function (record) {
          if (record.isSelected) {
            record.isSelected.value = value;
          }
        });
      });
    },
  },
};
</script>

<style></style>
