<template>
    <ClientOnly>
        <Card style="margin-top: 78px; min-height: 200px;"> 
            <template #content>
                <Panel header="Bought, but not evaluated clothes - Detail Page" class="rounded-4 bg-white" >
                    <div class="grid nested-grid">
                        <div class="col-4">
                            <!--<Galleria :value="images" :responsive-options="responsiveOptions" :num-visible="5" container-style="max-width: 480px">
                                <template #item="slotProps">
                                    <img :src="`${pfad}/${slotProps.item.pfad}`"  style="width: 100%;" />
                                </template>
                                <template #thumbnail="slotProps">
                                    <img :src="`${pfad}/thumb-${slotProps.item.pfad}`"  />
                                </template>
                            </Galleria> -->
                        </div>
                        <div class="col-8">
                            <div class="grid">
                                <Card class="col-12">
                                    <template #header>
                                        <h1>{{ itemb.kurzbeschreibung }}</h1>
                                    </template>
                                    <template #content>
                                        <div class="grid nested-grid">
                                            
                                            <div class="col-12 field gap-1">
                                                <small class="p-float-label" for="kurzbeschreibung">Title</small>
                                                <InputText id="kurzbeschreibung" v-model.trim="itemb.kurzbeschreibung" required="true" autofocus />
                                                <small class="p-float-label" id="kurzbeschreibung-help" >Enter a title for the clothing</small>
                                            </div>
                                            <div class="col-12 field ">
                                                <small class="p-float-label" for="bezeichnung">Description:</small>
                                                <Textarea id="bezeichnung" v-model.trim="itemb.bezeichnung" rows="5" cols="50"/>
                                            </div>

                                            <div class="col-4 field gap-1">
                                                <small class="p-float-label" for="groesse">Size: </small>
                                                <InputText class="p-inputtext-sm" id="groesse"  :value="itemb.groesse" />
                                            </div>
                                            <div class="col-4 field gap-1">
                                                <small class="p-float-label" for="farbe">Color: </small>
                                                <InputText class="p-inputtext-sm" id="farbe"  :value="itemb.farbe" />
                                            </div>
                                            <div class="col-4 field gap-1">
                                                <small class="p-float-label" for="type">Type of clothes</small>
                                                <Dropdown id="type" v-model.trim="itemb.type.id" :options="typen" optionLabel="bezeichnung" optionValue="id" placeholder="Select a type" />
                                                
                                            </div>
                                            <div class="col-12 field gap-1" >
                                                <small class="p-float-label" for="material">Material:</small>
                                                <InputText class="p-inputtext-sm" id="material"  :value="itemb.material" style="width:100%;"/>
                                            </div>

                                            <InputText :hidden="false" id="abmessungen" :value="itemb.abmessungen.id" />
                                            <InputText :hidden="false" id="frontview" :value="itemb.frontview.id" />
                                            
                                            <!--<table class="col-12 p-table-sm align-items-left measuretable">
                                                <thead>
                                                    <th>Measure:</th>
                                                    <th>Value (in cm):</th>
                                                </thead>
                                                <tr>
                                                    <td>Breast</td>
                                                    <td>{{ itemb.abmessungen.brust }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Length Top</td>
                                                    <td>{{ itemb.abmessungen.laenget }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Shoulder Width</td>
                                                    <td>{{ itemb.abmessungen.schulterbreite }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Waist Girth Top</td>
                                                    <td>{{ itemb.abmessungen.taillenumfangt }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Hip Girth</td>
                                                    <td>{{ itemb.abmessungen.hueftumfang }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Inner Seam</td>
                                                    <td>{{ itemb.abmessungen.innennaht }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Length Bottom</td>
                                                    <td>{{ itemb.abmessungen.laengeb }}</td>
                                                </tr>
                                                <tr>
                                                    <td>Waist Girth Bottom</td>
                                                    <td>{{ itemb.abmessungen.taillenumfangb }}</td>
                                                </tr>
                                            </table> -->
                                            
                                        </div>
                                    </template>
                                    <template #footer>
                                        <div class="col-12 gap-3 flex">
                                                <Button severity="secondary" label=" UPDATE " icon="pi pi-file-edit" @click="doUpdate(itemb)" />
                                                <Button severity="danger" label=" CANCEL " icon="pi pi-trash" @click="hideDialog" />        
                                        </div>
                                    </template>
                                </Card>
                                
                            </div>
                        </div>
                    </div>
                </Panel>
            </template>
        </Card>
    </ClientOnly>
</template>

<script setup lang="ts">
import { useToast } from "primevue/usetoast";
import { ref, onMounted } from "vue";


interface cItemB {
      id: number;
      bezeichnung: string;
      kurzbeschreibung: string;
      groesse: string;
      farbe: string;
      type: {id: number};
      material: string;
      abmessungen:{id: number};
      frontview: {id: number};
}


const toast = useToast();
// const itemb = {id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4};

const {data: typen } = await useFetch('http://ubodroid-2:8081/api/v1/typ');

let blubb, assm: any;

let params: any;
params = inject('dialogRef');
blubb = params.value.data.id;
assm = params.value.data.mid;
console.log('assm = ', assm);



onMounted(() => {
    
})

console.log('Blubb außerhalb von onMounted: ', blubb);
const {data: itemb } = await modifyItem();

const hideDialog = () => {
   
};

async function modifyItem() {
    const res = await useFetch('http://ubodroid-2:8081/api/v1/itb/'+blubb);
    console.log(res);
    res.data.value.abmessungen.id = assm;
    return res;
}

async function doUpdate(t: cItemB) {
      let fd = new FormData();
      fd.append('id', t.id);
      fd.append('bezeichnung', t.bezeichnung);
      fd.append('kurzbeschreibung', t.kurzbeschreibung);
      fd.append('groesse', t.groesse);
      fd.append('farbe', t.farbe);
      fd.append('typid', t.type.id.toString());
      fd.append('material', t.material);
      fd.append('abmessungenid', t.abmessungen.id.toString());
      fd.append('frontviewid', t.frontview.id.toString());
      console.log('fd = ', fd);
      await $fetch('http://ubodroid-2:8081/api/v1/itb/'+blubb,{
      method: 'PUT',
      body: fd
      });
      toast.add({ severity: 'success', summary: 'Item updated', detail: 'Title: ' + t.kurzbeschreibung, life: 3000 });
      await refreshNuxtData();
    console.log('PUT ausgeführt...'+ t.kurzbeschreibung);
      this.params.close();
    } 



</script>