<template>
    <DocSectionText v-bind="$attrs">
        <p>Each StepperPanel content can easily be customized with the default slot instead of using the built-in modes. Additionally, header, content, and separator sections of the StepperPanel are customizable via templating.</p>
    </DocSectionText>
    <div class="card flex flex-column justify-content-center">
        <Stepper
            v-model:activeStep="active"
            :pt="{
                stepperpanel: {
                    separator: ({ context }) => ({
                        style: { background: context.highlighted ? '#b9deb9' : '#ece9fc' }
                    })
                }
            }"
        >
            <StepperPanel>
                <template #header="slotProps">
                    <div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
                        <Avatar :icon="slotProps.active ? 'pi pi-user' : 'pi pi-check'" :style="{ backgroundColor: slotProps.active ? '#ece9fc' : '#b9deb9' }" size="large" shape="circle" />
                        <span class="text-lg ml-2">Account</span>
                    </div>
                </template>
                <div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
                    <h3 class="text-center mt-3">Personal Details</h3>
                    <div class="field p-fluid">
                        <IconField>
                            <InputIcon>
                                <i class="pi pi-user" />
                            </InputIcon>
                            <InputText id="input" v-model="name" type="text" placeholder="Name" />
                        </IconField>
                    </div>
                    <div class="field p-fluid">
                        <IconField>
                            <InputIcon>
                                <i class="pi pi-envelope" />
                            </InputIcon>
                            <InputText id="email" v-model="email" type="email" placeholder="Email" />
                        </IconField>
                    </div>
                    <div class="field p-fluid">
                        <InputText v-model="password" type="text" placeholder="Password" />
                    </div>
                    <div class="field p-fluid">
                        <InputText v-model="cpassword" type="text" placeholder="Confirm Password" />
                    </div>
                </div>
            </StepperPanel>
            <StepperPanel>
                <template #header="slotProps">
                    <div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
                        <Avatar
                            :icon="slotProps.highlighted || completed ? 'pi pi-check' : 'pi pi-shopping-cart'"
                            :style="{ backgroundColor: slotProps.active ? '#ece9fc' : slotProps.highlighted || completed ? '#b9deb9' : null }"
                            size="large"
                            shape="circle"
                        />
                        <span class="text-lg ml-2">Cart</span>
                    </div>
                </template>
                <DataView :value="products">
                    <template #header>
                        <h3 class="text-center">Cart Details</h3>
                    </template>
                    <template #list="slotProps">
                        <div class="grid grid-nogutter">
                            <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
                                <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
                                    <div class="md:w-10rem relative">
                                        <img class="block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
                                    </div>
                                    <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
                                        <div class="flex flex-row md:flex-column justify-content-between align-items-start gap-2">
                                            <div>
                                                <span class="font-medium text-secondary text-sm">{{ item.category }}</span>
                                                <div class="text-lg font-medium text-900 mt-2">{{ item.name }}</div>
                                            </div>
                                            <div class="surface-100 p-1" style="border-radius: 30px">
                                                <div class="surface-0 flex align-items-center gap-2 justify-content-center py-1 px-2" style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)">
                                                    <span class="text-900 font-medium text-sm">{{ item.rating }}</span>
                                                    <i class="pi pi-star-fill text-yellow-500"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="flex flex-column md:align-items-end gap-5">
                                            <span class="text-xl font-semibold text-900">${{ item.price }}</span>
                                            <div class="flex flex-row-reverse md:flex-row gap-2">
                                                <InputNumber v-model="quantity[index]" showButtons buttonLayout="horizontal" inputClass="w-3rem text-center" :min="0">
                                                    <template #incrementbuttonicon>
                                                        <span class="pi pi-plus" />
                                                    </template>
                                                    <template #decrementbuttonicon>
                                                        <span class="pi pi-minus" />
                                                    </template>
                                                </InputNumber>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </DataView>
            </StepperPanel>
            <StepperPanel>
                <template #header="slotProps">
                    <div :class="slotProps.class" @click="() => slotProps.clickCallback(event)">
                        <Avatar
                            :icon="slotProps.highlighted || completed ? 'pi pi-check' : 'pi pi-money-bill'"
                            :style="{ backgroundColor: slotProps.active ? '#ece9fc' : slotProps.highlighted || completed ? '#b9deb9' : null }"
                            size="large"
                            shape="circle"
                        />
                        <span class="text-lg ml-2">Billing</span>
                    </div>
                </template>
                <h3 class="text-center mt-3">Payment</h3>
                <div class="grid formgrid p-fluid">
                    <div class="col-12 field mb-4">
                        <label class="text-900 font-medium mb-3 ml-1">Card Number</label>
                        <InputMask v-model="cc" mask="9999-9999-9999-9999" placeholder="9999-9999-9999-9999" />
                    </div>
                    <div class="col-12 lg:col-6 field mb-4">
                        <label class="text-900 font-medium mb-3 ml-1">Expiry Date</label>
                        <InputMask v-model="exp" mask="99/99" placeholder="99/99" slotChar="MM/YY" />
                    </div>
                    <div class="col-12 lg:col-6 field mb-4">
                        <label class="text-900 font-medium mb-3 ml-1">CVC</label>
                        <InputMask v-model="cvc" mask="999" placeholder="999" />
                    </div>
                    <div class="col-12 field mb-0">
                        <label for="holderName" class="text-900 font-medium mb-3 ml-1">Cardholder Name</label>
                        <InputText id="holderName" type="text" class="w-full mb-3" />
                    </div>
                </div>
            </StepperPanel>
            <template #end>
                <div v-if="!completed" class="flex justify-content-end gap-2">
                    <Button v-if="active !== 0" label="Back" severity="secondary" @click="active -= 1" />
                    <Button v-if="active !== 2" label="Continue" @click="active += 1" />
                    <Button
                        v-if="active === 2"
                        label="Complete"
                        @click="
                            () => {
                                active = null;
                                completed = true;
                            }
                        "
                    />
                </div>
                <div v-else class="flex flex-column justify-content-center mx-auto">
                    <Message severity="success">The order was submitted successfully.</Message>
                    <Button
                        label="New Order"
                        class="w-10rem mx-auto"
                        @click="
                            () => {
                                active = 0;
                                completed = false;
                            }
                        "
                    />
                </div>
            </template>
        </Stepper>
    </div>
    <!-- <div class="card flex flex-column justify-content-center gap-5" style="height: auto">
        <Stepper v-model:activeStep="active" orientation="vertical">
            <StepperPanel v-for="(step, index) of steps" :key="step.id">
                <template #header="slotProps">
                    <div class="flex align-items-center gap-2" :class="slotProps.class" @click="(event) => slotProps.clickCallback(event, index)">
                        <Button :severity="slotProps.highlighted || completed ? 'success' : 'secondary'" rounded :icon="step.icon" />
                        <span>{{ step.header }}</span>
                    </div>
                </template>
                <template #content="{ clickCallback }">
                    <div class="flex flex-column gap-5">
                        <span>{{ step.content }}</span>
                        <div class="flex gap-3">
                            <Button v-if="index !== steps.length - 1" label="Continue" :disabled="index === steps.length - 1" @click="(event) => clickCallback(event, index + 1)" />
                            <Button
                                v-else
                                label="Finish"
                                @click="
                                    (event) => {
                                        clickCallback(event, null);
                                        completed = true;
                                    }
                                "
                            />
                            <Button label="Back" severity="secondary" :disabled="index === 0" @click="(event) => clickCallback(event, index - 1)" />
                        </div>
                    </div>
                </template>
            </StepperPanel>
            <template v-if="completed" #end>
                <div class="flex">
                    <Button
                        severity="contrast"
                        label="Reset"
                        @click="
                            completed = false;
                            active = 0;
                        "
                    />
                </div>
            </template>
        </Stepper>
    </div>
    <div class="card flex flex-column justify-content-center gap-5" style="height: auto">
        <Stepper v-model:activeStep="active">
            <StepperPanel v-for="(step, index) of steps" :key="step.id">
                <template #header="slotProps">
                    <div class="flex align-items-center gap-2" :class="slotProps.class" @click="(event) => slotProps.clickCallback(event, index)">
                        <Button :severity="slotProps.highlighted || completed ? 'success' : 'secondary'" rounded :icon="step.icon" />
                        <span>{{ step.header }}</span>
                    </div>
                </template>
                <template #content="{ clickCallback }">
                    <div class="flex flex-column gap-5">
                        <span>{{ step.content }}</span>
                        <div class="flex gap-3">
                            <Button v-if="index !== steps.length - 1" label="Continue" :disabled="index === steps.length - 1" @click="(event) => clickCallback(event, index + 1)" />
                            <Button
                                v-else
                                label="Finish"
                                @click="
                                    (event) => {
                                        clickCallback(event, null);
                                        completed = true;
                                    }
                                "
                            />
                            <Button label="Back" severity="secondary" :disabled="index === 0" @click="(event) => clickCallback(event, index - 1)" />
                        </div>
                    </div>
                </template>
            </StepperPanel>
            <template v-if="completed" #end>
                <div class="flex">
                    <Button
                        severity="contrast"
                        label="Reset"
                        @click="
                            completed = false;
                            active = 0;
                        "
                    />
                </div>
            </template>
        </Stepper>
    </div> -->
</template>

<script>
import { ProductService } from '@/service/ProductService';

export default {
    data() {
        return {
            active: 0,
            completed: false,
            products: null,
            name: null,
            email: null,
            password: null,
            cpassword: null,
            quantity: [1, 2],
            selectedValue: null,
            cc: null,
            cvc: null,
            exp: null,
            steps: [
                {
                    id: 0,
                    header: 'Long Header 1',
                    content: 'Content 1',
                    icon: 'pi pi-cog'
                },
                {
                    id: 1,
                    header: 'Long Header 2',
                    content: 'Content 2',
                    icon: 'pi pi-discord'
                },
                {
                    id: 2,
                    header: 'Long Header 3',
                    content: 'Content 3',
                    icon: 'pi pi-twitter'
                }
            ]
        };
    },
    mounted() {
        ProductService.getProductsSmall().then((data) => (this.products = data.slice(0, 2)));
    }
};
</script>
