<script setup lang="ts">
import {ref, computed} from 'vue';
import AddGuarantorModal from "~/components/master/guarantor/AddGuarantorModal.vue";
import {EditIcon, EyeIcon, PlusIcon, TrashIcon} from "vue-tabler-icons";

const search = ref('');
const guarantorTypeSelected = ref('');
const isModalOpen = ref(false);
const colorActive = ref('success');
const colorNonActive = ref('danger');

const headers = [
  {title: 'Nama', key: 'name'},
  {title: 'Status', key: 'status', sortable: false},
  {title: 'Action', key: 'isActive', sortable: false},
  {title: '', key: 'dropdown', sortable: false},
];

const listInsurance = ref([
  {id: 4, name: 'PT Bentoel', status: 'active', isActive: true},
  {id: 5, name: 'PT Outsuka', status: 'non_active', isActive: true},
  {id: 6, name: 'PT. Gandum', status: 'active', isActive: false},
]);

const toggleStatus = (item) => {
  item.isActive = !item.isActive;
};

function handleDataSaved(data) {
  console.log('Data baru diterima di parent:', data);

  // Tampilkan data yang baru ditambahkan (simulasi penambahan data ke list)
  // lastAddedData.value = data;

  // Di sini Anda akan memuat ulang data tabel utama (jika menggunakan API)
}

const tableActionData = ref([
  {
    icon: EyeIcon,
    listtitle: 'View'
  },
  {
    icon: EditIcon,
    listtitle: 'Edit'
  },
  {
    icon: TrashIcon,
    listtitle: 'Delete'
  }
]);

const handleAction = (action) => {
  console.log(action);
};

const openModalGuarantor = (type) => {
  guarantorTypeSelected.value = type;
  isModalOpen.value = true;
}
</script>

<template>
  <v-card flat>
    <div class="d-sm-flex justify-space-between align-center my-7">
      <v-sheet width="255" class="mb-lg-0 mb-4">
        <v-text-field
            v-model="search"
            label="Cari Penjamin"
            density="comfortable"
            variant="outlined"
            clearable
            hide-details
        >
          <template v-slot:prepend-inner>
            <Icon icon="solar:magnifer-linear" height="18" width="25"/>
          </template>
        </v-text-field>
      </v-sheet>
      <v-btn color="primary" v-bind="props" flat class="ml-auto"
             @click="openModalGuarantor('company')">
        <v-icon class="mr-2">mdi-plus</v-icon>
        Tambah Penjamin
      </v-btn>
    </div>

    <v-data-table
        :headers="headers"
        :items="listInsurance"
        :search="search"
        item-key="id"
        class="elevation-1"
        hide-default-footer
    >

      <template v-slot:item.status="{ item }">
        <v-chip
            :color="item.isActive ? 'primary' : 'danger'"
            :text="item.isActive ? 'Aktif' : 'Tidak Aktif'"
            label
            size="small"
        ></v-chip>
      </template>

      <template v-slot:item.isActive="{ item }">
        <div class="d-flex align-center">
          <v-switch
              v-model="item.isActive"
              hide-details
              density="compact"
              :color="item.isActive ? colorActive: colorNonActive"
          ></v-switch>
          <span class="ml-2 text-caption">
            {{ item.isActive ? 'Aktif' : 'Tidak Aktif' }}
          </span>
        </div>
      </template>

      <template v-slot:item.dropdown="{ item }">
        <v-avatar size="22">
          <DotsIcon size="20" color="grey100"/>
        </v-avatar>

        <v-menu activator="parent">
          <v-list>
            <v-list-item value="action" v-for="list in tableActionData" :key="list.listtitle"
                         hide-details min-height="38" @click="handleAction(list.listtitle)">
              <v-list-item-title>
                <v-avatar size="20" class="mr-2">
                  <component :is="list.icon" stroke-width="2" size="20"/>
                </v-avatar>
                {{ list.listtitle }}
              </v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>

      </template>

      <template v-slot:bottom></template>

    </v-data-table>
  </v-card>

  <AddGuarantorModal
      v-model="isModalOpen"
      :guarantor-type="guarantorTypeSelected"
      @data-saved="handleDataSaved"
  />
</template>

<style scoped>

</style>
