import React, {useEffect} from 'react'
import OrdersTable from "../components/OrdersTable";
import Search from "../components/Search";
import { useDispatch, useSelector } from "react-redux";
import { getOrders } from "../httpServices/httpServiceOrder";
import Pagination from "../components/Pagination";
import {useParams} from "react-router-dom";
import { useTranslations } from '../hooks/useTranslation';

const Dashboard = () => {
    const { t } = useTranslations();
    const { page } = useParams();
    const dispatch = useDispatch();
    const currentPage = parseInt(page) || 1;
    const { orders, loading, error } = useSelector(state => state.orders)

    const handleSearch = (searchTerm) =>{
        console.log('Searching for:', searchTerm);
    }

    useEffect(()=>{
        dispatch(getOrders(currentPage))
    },[dispatch, currentPage])

    if (error) {
        return <div className="bg-red-600 p-10 text-white text-center">{t('error_prefix')} {error}</div>;
    }


    return (
        <div className="mt-[0]">
            <div className="pl-[15px] pr-[15px]">
                <div className="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1">
                    <div className="flex justify-between my-[15px]">
                        <h4 className="mb-6 text-xl font-bold text-black dark:text-white">{t('order_archives')}</h4>
                        <Search handleSearch={handleSearch}/>
                    </div>
                    <OrdersTable orders={orders} isSuccess={loading}/>
                    <Pagination orders={orders} currentPage={currentPage}/>
                </div>
            </div>
        </div>
    );
}

export default Dashboard;