<script setup lang="ts">
// @todo: sample page view
import { onBeforeMount, ref } from "vue";
import {
  ARow,
  ACol,
  AForm,
  ASheet,
  AContainer,
  ATextField,
  DetailedView,
  ActindoDataTable,
  useEditableTable,
} from "@actindo/core-ui";
import { LOCAL_SAMPLE_TABLE, SAMPLE_TABLE_ACTIONS } from "@/constants/tables";
import {
  SAMPLE_STATUS,
  sampleEntityApi,
  type ISampleEntity,
} from "@/services/api/Sample/Entity";
import EntityForm from "./components/EntityForm.vue";
import CellSampleStatus from "./components/CellSampleStatus.vue";

const rows = ref<ISampleEntity[]>([]);
const loading = ref(false);

const {
  table,
  isBatchLoading,
  showChangeDialog,
  onAddRow,
  onEditRow,
  onDeleteRows,
  batchApiCalls,
} = useEditableTable({
  addApi: sampleEntityApi.mockedCreate,
  editApi: sampleEntityApi.mockedUpdate,
  deleteApi: sampleEntityApi.mockedRemove,
});

function updateItems(selectedRows: ISampleEntity[], status: SAMPLE_STATUS) {
  const updatedItems = selectedRows.map((item) => [{ ...item, status }]);

  return batchApiCalls(onEditRow, updatedItems, false);
}

function handleAction(eventName: string, selectedRows: ISampleEntity[]) {
  switch (eventName) {
    case SAMPLE_TABLE_ACTIONS.DELETE:
      return batchApiCalls(
        onDeleteRows,
        selectedRows.map(({ id }) => [id]),
        false,
      );

    case SAMPLE_TABLE_ACTIONS.MARK_INIT:
      return updateItems(selectedRows, SAMPLE_STATUS.INIT);
    case SAMPLE_TABLE_ACTIONS.MARK_DONE:
      return updateItems(selectedRows, SAMPLE_STATUS.DONE);
    case SAMPLE_TABLE_ACTIONS.MARK_FAILED:
      return updateItems(selectedRows, SAMPLE_STATUS.FAILED);
  }
}

function addEntity() {
  showChangeDialog.value = true;
}

async function save(newEntity: ISampleEntity) {
  await onAddRow(newEntity);
  showChangeDialog.value = false;
}

async function fetchData() {
  try {
    loading.value = true;
    const { data } = await sampleEntityApi.getMockedList({});
    rows.value = data;
  } finally {
    loading.value = false;
  }
}

onBeforeMount(fetchData);
</script>

<template>
  <ASheet class="d-flex flex-column h-100" color="background_2">
    <ActindoDataTable
      ref="table"
      :data="rows"
      :is-loading="loading"
      v-bind="LOCAL_SAMPLE_TABLE"
      @action="handleAction"
      @create="addEntity"
      @refresh="fetchData"
    >
      <template #cell-status="{ cellValue }">
        <CellSampleStatus :cell-value="cellValue" />
      </template>

      <template #details="{ row }: { row: ISampleEntity }">
        <DetailedView>
          <template #toolbar-title>
            <div class="d-flex">
              <span>{{ $t("SampleView.dataDetails") }}</span>
              <CellSampleStatus
                v-if="row"
                :cell-value="row.status"
                class="pr-2 ml-4"
              />
            </div>
          </template>

          <AContainer v-if="row" fluid>
            <AForm @submit.prevent>
              <ARow>
                <ACol cols="12" md="6">
                  <ATextField
                    v-model="row.sample.name"
                    :label="$t('SampleView.name')"
                    readonly
                  />
                </ACol>
                <ACol cols="12" md="6">
                  <ATextField
                    v-model="row.key"
                    :label="$t('SampleView.key')"
                    readonly
                  />
                </ACol>
                <ACol cols="12" md="6">
                  <ATextField
                    v-model="row.validFrom"
                    :label="$t('SampleView.validFrom')"
                    type="date"
                    readonly
                  />
                </ACol>
              </ARow>
            </AForm>
          </AContainer>
        </DetailedView>
      </template>

      <template #modals>
        <EntityForm
          v-if="showChangeDialog"
          v-model="showChangeDialog"
          :loading="isBatchLoading"
          @save="save"
        />
      </template>
    </ActindoDataTable>
  </ASheet>
</template>
