<script setup lang="ts">
import { ref, computed } from 'vue';
// import { useEcomStore } from '@/stores/apps/eCommerce';
// import StepFirst from './steps/StepFirst.vue';
// import StepSecond from './steps/StepSecond.vue';
// import Payment from './steps/Payment.vue';
import Thankyou from '@/components/app/table/steps/Thankyou.vue';

import { BasketIcon } from 'vue-tabler-icons';
import Table1 from '~/components/table/Table1.vue';

// const store = useEcomStore();
const thankyou = ref(false);

const getCart = computed(() => {
    // return store.cart;
});
const tab = ref('tab-1');
function changeTab(e: string) {
    tab.value = e;
}


</script>
<template>
    <v-card elevation="0">
        <v-card-item>
           
                <v-tabs v-model="tab" color="primary" class="customTab">
                    <v-tab value="tab-1" rounded="md" class="mb-3 text-left me-4" height="70">
                        <span class="round-40 rounded-circle bg-grey100 d-flex justify-center align-center me-3 icon">
                            <BasketIcon stroke-width="1.5" width="20"  />
                        </span>
                        
                        <div>
                            <div class="text-h6">Item Cart</div>
                            <span class="text-subtitle-2 textSecondary font-weight-medium d-block"
                                >Product Summary</span
                            >
                        </div>
                    </v-tab>

                    <v-tab value="tab-2" rounded="md" class="mb-3 text-left me-4" height="70" >
                        <span class="round-40 rounded-circle bg-grey100 d-flex justify-center align-center me-3 icon">
                        <FileDescriptionIcon stroke-width="1.5" width="20"  />
                        </span>
                        <div>
                            <div class="text-h6">Billing</div>
                            <span class="text-subtitle-2 textSecondary font-weight-medium d-block">
                                Billing Information
                            </span>
                        </div>
                    </v-tab>

                    <v-tab value="tab-3" rounded="md" class="mb-3 text-left" height="70" >
                        <span class="round-40 rounded-circle bg-grey100 d-flex justify-center align-center me-3 icon">
                        <CreditCardIcon stroke-width="1.5" width="20" />
                        </span>
                        <div>
                            <div class="text-h6">Payment</div>
                            <span class="text-subtitle-2 textSecondary font-weight-medium d-block">
                                Add & Update Card
                            </span>
                        </div>
                    </v-tab>
                </v-tabs>
                <v-window v-model="tab">
                    <v-window-item value="tab-1" class="pa-1">
                        <Table1 />
                        <v-row class="mt-3">
                            <v-col cols="12" sm="6">
                                <v-btn color="primary" variant="tonal" to="/ecommerce/products">Continue Shopping</v-btn>
                            </v-col>
                            <v-col cols="12" sm="6" class="text-sm-right">
                                <v-btn color="primary" @click="changeTab('tab-2')">CheckOut</v-btn>
                            </v-col>
                        </v-row>
                    </v-window-item>
                    <v-window-item value="tab-2" class="pa-1" >
                        <!-- <Table1 /> -->
                        <v-row class="mt-3">
                            <v-col cols="6">
                                <v-btn color="primary" variant="tonal" @click="changeTab('tab-1')">Back</v-btn>
                            </v-col>
                            <v-col cols="6" class="text-right">
                                <v-btn color="primary" @click="changeTab('tab-3')">Place an Order</v-btn>
                            </v-col>
                        </v-row>
                    </v-window-item>
                    <v-window-item value="tab-3" class="pa-1">
                        <!-- <Table1 /> -->
                        <v-row class="mt-3">
                            <v-col cols="12" sm="6">
                                <v-btn color="primary" variant="tonal" @click="changeTab('tab-2')">Back</v-btn>
                            </v-col>
                            <v-col cols="12" sm="6" class="text-sm-right">
                                <v-btn color="primary" @click="thankyou = true">Complete an Order</v-btn>
                                <!-- Modal -->
                                <v-dialog v-model="thankyou" max-width="750">
                                    <Thankyou />
                                </v-dialog>
                            </v-col>
                        </v-row>
                    </v-window-item>
                </v-window>
          
        </v-card-item>
    </v-card>
</template>
<style lang="scss">
.customTab {
    min-height: 68px;
}
</style>
