<template>
    <ClientOnly>
        <Card style="margin-top: 78px; min-height: 200px;"> 
            <template #content>
                <Panel header="Bought, but not evaluated clothes" class="rounded-4 bg-white" >
                    <template #icons>
                        <Button class="mr-2" @click="onNew" label=" NEW " icon="pi pi-plus" />
                    </template>
                    <DataView :value="itemsb" paginator :rows="5">
                        <template #list="slotProps">
                            <div class="col-12">
                                <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
                                    <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="getImageUrl(slotProps.data.frontview.pfad)" :alt="slotProps.data.kurzbeschreibung" />
                                    <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                                        <div class="flex flex-column align-items-center sm:align-items-start gap-3">
                                            <div class="text-2xl font-bold text-900">{{ slotProps.data.kurzbeschreibung }}</div>
                                            <div class="flex align-items-center gap-3">
                                                <span class="flex align-items-center gap-2">
                                                    <i class="pi pi-tag"></i>
                                                    <span class="font-semibold">{{ slotProps.data.typid }}</span>
                                                </span>
                                                
                                            </div>
                                            <div class="col-12 gap-3 flex">
                                                    <Button severity="info" @click="openDetail(slotProps.data.id)" target="_blank" label=" Details " icon="pi pi-list" />
                                                    <Button severity="success" @click="openEval(slotProps.data.typid)" label=" Evaluation " icon="pi pi-eye" />                                                    
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>

                            </div>
                        </template>
                    </DataView>
                    <Dialog :visible="createItemBDialog" :style="{width: '450px'}" header="New Bought Clothes" :modal="true" class="p-fluid">
                      <div class="field">
                          <label for="kurzbeschreibung">Title</label>
                          <InputText id="kurzbeschreibung" v-model.trim="itemb.kurzbeschreibung" required="true" autofocus />
                          <small id="kurzbeschreibung-help" >Enter a title for the clothing</small>
                      </div>
                      <div class="field p-float-label">
                          <label for="bezeichnung">Description:</label>
                          <Textarea id="bezeichnung" v-model.trim="itemb.bezeichnung" rows="5" cols="50"/>
                      </div>
                      <div class="field">
                          <label for="groesse">Size:</label>
                          <InputText id="groesse" v-model.trim="itemb.groesse" />
                          <small id="groesse-help" >Enter a size for the clothing</small>
                      </div>
                      <div class="field">
                          <label for="farbe">Color</label>
                          <InputText id="farbe" v-model.trim="itemb.farbe"  />
                          <small id="farbe-help" >Enter a color for the clothing</small>
                      </div>
                      <div class="field">
                          <label for="type">Type of clothes</label>
                          <Dropdown id="type" v-model.trim="itemb.typid" @change="OnChangeDD" :options="typen" optionLabel="bezeichnung" optionValue="id" placeholder="Select a type" />
                          
                      </div>
                      <div class="field">
                          <label for="material">Material</label>
                          <InputText id="material" v-model.trim="itemb.material"  />
                          <small id="material-help" >Enter a material for the clothing</small>
                      </div>

                      <template #footer>
                          <Button label="Cancel" icon="pi pi-times" text @click="hideDialog"/>
                          <Button label="Save" icon="pi pi-check" text @click="onSubmit(itemb)" />
                      </template>
                    </Dialog>
                </Panel>
            </template>
        </Card>
    </ClientOnly>
    



</template>

<script setup lang="ts">
import { ref } from "vue";
const pfad = '/photos';
import { useToast } from 'primevue/usetoast';
import { stringify } from "querystring";

    interface cItemB {
      id: number;
      bezeichnung: string;
      kurzbeschreibung: string;
      groesse: string;
      farbe: string;
      typid: number;
      material: string;
      abmessungenid: number;
      frontviewid: number;
    }
const toast = useToast();    
const createItemBDialog = ref(false);
const itemb = ref({id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4});
//const itemsb = ref();

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

let imgurl = ref();

async function openDetail(id) {
    await navigateTo({
        path: '/itembdetail',
        query: {
            id: id,
            
        }
        
        },
     ) 
};

async function openEval(id) {
    
};

function getImageUrl(name) {
    return imgurl = computed(() => { return new URL(`${pfad}/${name}`, import.meta.url).href; });
}

const onNew = () => {
    itemb.value = ref({id: 0, bezeichnung: '', kurzbeschreibung: '', groesse: '', farbe: '', typid: 0, material: '', abmessungenid: 1, frontviewid: 4});
    createItemBDialog.value = true;
    };

    const hideDialog = () => {
    createItemBDialog.value = false;
    };
    
    async function onSubmit(t: cItemB) {
      let fd = new FormData();
      fd.append('bezeichnung', t.bezeichnung);
      fd.append('kurzbeschreibung', t.kurzbeschreibung);
      fd.append('groesse', t.groesse);
      fd.append('farbe', t.farbe);
      fd.append('typid', t.typid.toString());
      fd.append('material', t.material);
      fd.append('abmessungenid', t.abmessungenid.toString());
      fd.append('frontviewid', t.frontviewid.toString());
      console.log('fd = ', fd);
      await $fetch('http://ubodroid-2:8081/api/v1/itb',{
      method: 'POST',
      body: fd
      });
      createItemBDialog.value = false;
      toast.add({ severity: 'success', summary: 'New bought item created', detail: 'Title: ' + t.kurzbeschreibung, life: 3000 });
      await refreshNuxtData();
    console.log('POST ausgeführt...'+ t.kurzbeschreibung);
    } 

const OnChangeDD = () => {
    console.log('Die ausgewählte Option ist: ', itemb.value)
}

</script>