'use client';

import Pagination from '@/src/components/custom-components/pagination';
import { animations } from '@/src/constants/animations';
import { useAppSelector } from '@/src/redux/hooks';
import { setCurrentPage } from '@/src/redux/slice/products-slice';
import { RootState } from '@/src/redux/store';
import { apiEndpoints } from '@/src/server_api/config/api.endpoints';
import useApi from '@/src/server_api/hooks/use-api';
import { APIFetch } from '@/src/server_api/utils/api-fetch';
import TrainingHeader from '@/src/shared-pages/trainings/training-header';
import TrainingList from '@/src/shared-pages/trainings/training-list';
import React from 'react';
import { useDispatch } from 'react-redux';

const TrainingsClient = () => {
    const dispatch = useDispatch();

    const { currentPage, productsPerPage } = useAppSelector(
        (state: RootState) => state.products
    );

    const {
        data = [],
        isLoading,
        totalCount = 0,
    } = useApi({
        apiEndpoint: apiEndpoints.common.content_management,
        enableFetchApi: true,
        skipAuth: true,
        searchParams: {
            contentSlug: 'trainings',
        },
    });

    const totalPages = Math.ceil(
        totalCount / productsPerPage
    );

    const startIndex =
        (currentPage - 1) * productsPerPage;

    const currentProducts = data.slice(
        startIndex,
        startIndex + productsPerPage
    );

    const changePage = (page: number) => {
        dispatch(setCurrentPage(page));

        window.scrollTo({
            top: 0,
            behavior: 'smooth',
        });
    };

    return (
        <div className="bg-white pb-5">
            <TrainingHeader
                totalCount={totalCount}
            />

            <div
                className="
                mx-auto
                px-0
                py-10
                sm:px-6
                lg:px-0
            "
            >
                <APIFetch
                    lengthCheckObject={data}
                    isLoading={isLoading}
                    animatedLoading={animations.cardList}
                    blocks={8}
                >
                    <main>
                        <div
                            className="
                            grid
                            grid-cols-1
                            gap-6
                            px-5
                            sm:grid-cols-2
                            sm:px-5
                            md:px-2
                            lg:grid-cols-3
                            lg:gap-8
                            lg:px-30
                            2xl:px-45
                        "
                        >
                            {currentProducts.map(
                                (training: any, index: number) => (
                                    <TrainingList
                                        key={
                                            training?._id ||
                                            training?.id ||
                                            index
                                        }
                                        training={training}
                                    />
                                )
                            )}
                        </div>
                    </main>
                </APIFetch>
            </div>

            <Pagination
                totalPages={totalPages}
                currentPage={currentPage}
                changePage={changePage}
            />
        </div>
    );

};

export default TrainingsClient;