'use client'
import Layout from '@/hoc/Layout'
import { NextPage } from 'next'
import React, { useState } from 'react'
import Menu from '../components/Menu'
import { useGetOrders, useGetReturnOrder } from './hooks/useOrdersData'
import { Order, ReturnOrder } from './types/Types'
import OrderTabs from './components/OrderTabs'
import OrderItem from './components/OrderItem'
import ReturnOrderItem from './components/ReturnOrderItem'
import { getStatusText } from '@/config/func'


const Orders: NextPage = () => {

    const [activeTab, setActiveTab] = useState<'Processing' | 'Delivered' | 'Cancelled' | 'Returned' | ''>('')
    const { data: ordersData } = useGetOrders(activeTab);
    const { data: returnOrderData } = useGetReturnOrder();

    // تابع تبدیل وضعیت به فارسی


    return (
        <div className='p-3 sm:p-4 md:p-6'>
            <Menu pageActive='orders' />

            {/* Tabs */}
            <OrderTabs
                activeTab={activeTab}
                setActiveTab={setActiveTab}
                tabCounts={{
                    all: 0,
                    cancelled: ordersData?.results?.userOrderCount.cancelled || 0,
                    current: ordersData?.results?.userOrderCount.processing || 0,
                    delivered: ordersData?.results?.userOrderCount.delivered || 0,
                    returned: ordersData?.results?.userOrderCount.returned || 0,
                }}
            />

            {/* Orders List */}
            <div className='mt-4 sm:mt-6 space-y-3 sm:space-y-4'>
                {activeTab === 'Returned' ? (
                    returnOrderData?.results?.returnOrders?.map((order: ReturnOrder) => (
                        <ReturnOrderItem
                            key={order._id}
                            order={order}
                        />
                    ))
                ) : (
                    ordersData?.results?.orders?.map((order: Order) => (
                        <OrderItem
                            key={order._id.toString()}
                            order={order}
                            getStatusText={getStatusText}
                        />
                    ))
                )}
            </div>
        </div>
    )
}

export default function OrdersWithLayout() {
    return (
        <Layout>
            <Orders />
        </Layout>
    )
}