<template>
  <!-- <q-tr :props="rowData" @click="selectRow(rowData)"> -->
  <!-- If Selection is active -->
  <q-td
    v-for="col in rowData.cols"
    :key="col.name"
    auto-width
    :props="rowData"
    :test-id="col.name"
    @click="$emit('onClickRow', rowData.row)"
  >
    <div :class="rowValueCustomStyle(col)">
      <!-- If column is boolean -->
      <checkbox-field
        v-if="col.type === 'boolean'"
        v-model:row-data="rowData"
        :col
        @update-table-value="
          ($evt) => {
            $emit('updateTableValue', $evt);
          }
        "
      />

      <image-field
        v-else-if="col.type === 'image'"
        v-model:row-data="rowData"
        :col
      />

      <select-field
        v-else-if="col.type === 'select' && col.editable"
        v-model:row-data="rowData"
        :col
        @update-table-value="
          ($evt) => {
            $emit('updateTableValue', $evt);
          }
        "
      />
      <DateField
        v-else-if="col.type === 'date' && col.editable"
        v-model:row-data="rowData"
        :col
        @update-table-value="
          ($evt) => {
            $emit('updateTableValue', $evt);
          }
        "
      />

      <DateTimeField
        v-else-if="col.type === 'dateTime' && col.editable"
        v-model:row-data="rowData"
        :col
        @update-table-value="
          ($evt) => {
            $emit('updateTableValue', $evt);
          }
        "
      />
      <TextareaField
        v-else-if="col.type === 'textarea' && col.editable"
        v-model:row-data="rowData"
        :col
        @update-table-value="
          ($evt) => {
            $emit('updateTableValue', $evt);
          }
        "
      />
      <DefaultEditableField
        v-else-if="
          col.editable &&
          (col.type === 'number' ||
            col.type === 'decimal' ||
            col.type === 'string' ||
            col.type === 'option')
        "
        v-model:row-data="rowData"
        :col
        @update-table-value="
          ($evt) => {
            $emit('updateTableValue', $evt);
          }
        "
      />
      <span
        v-else-if="!col.editable && col.type === 'decimal'"
        class="full-height column justify-center full-width"
        style="text-align: right"
      >
        {{
          col.format
            ? setNumberOfDecimals(
                parseFloat(col.format(rowData.row[col.name], rowData.row)),
                col.nOfDecimals ?? 2
              )
            : setNumberOfDecimals(
                rowData.row[col.name] as number,
                col.nOfDecimals ?? 2
              )
        }}
      </span>
      <span
        v-else-if="!col.editable && col.type === 'number'"
        class="full-height column justify-center full-width"
        style="text-align: right"
      >
        {{
          col.format
            ? col.format(rowData.row[col.name], rowData.row)
            : rowData.row[col.name]
        }}
      </span>

      <span
        v-else
        class="full-height column justify-center full-width"
        :style="'text-align: ' + (col.align ?? 'left')"
      >
        {{
          col.format
            ? col.format(rowData.row[col.name], rowData.row)
            : rowData.row[col.name]
        }}
      </span>
    </div>
  </q-td>
  <RowActionMenu
    v-model:row-data="rowData"
    :selection="selection"
    :page-actions="pageActions"
    :can-display-q-menu="canDisplayQMenu"
    @active-action-from-row="
      (action, row) => {
        $emit('activeActionFromRow', action, row);
      }
    "
  />
</template>
<script setup lang="ts">
import { onBeforeMount } from "vue";
import rowValueCustomStyle from "../../helpers/rowValueCustomStyle";
import CheckboxField from "./CheckboxField.vue";
import SelectField from "./SelectField.vue";
import DefaultEditableField from "./DefaultEditableField.vue";
import DateField from "./DateField.vue";
import TextareaField from "./TextareaField.vue";
import RowActionMenu from "./RowActionMenu.vue";
import ImageField from "./ImageField.vue";
import { KettalPageActions, KettalQTableColumn, TableRow } from "@/types";
import DateTimeField from "./DateTimeField.vue";

const rowData = defineModel<{ cols: KettalQTableColumn[]; row: TableRow }>(
  "rowData",
  { required: true }
);
const {
  canDisplayQMenu,
  pageActions = [],
  selection,
} = defineProps<{
  canDisplayQMenu: boolean;
  pageActions: KettalPageActions[];
  selection: "single" | "multiple" | "none";
}>();

defineEmits(["updateTableValue", "onClickRow", "activeActionFromRow"]);

// =========================================================
// ================ Body SLOT MADE REACTIVE ================
// =========================================================

onBeforeMount(() => {
  rowData.value.cols.forEach(({ name, initValue }) => {
    if (rowData.value.row[name] == null) {
      rowData.value.row[name] = initValue ?? "";
    }
  });
});

function setNumberOfDecimals(value: number, nOfDecimals: number) {
  if (value === null || value === undefined) {
    return "";
  }
  if (nOfDecimals === undefined) {
    return value.toFixed(2);
  }
  return value.toFixed(nOfDecimals);
}
</script>
<style></style>
