"use client"
import { DataTable, DataTableColumn, DataTableSortStatus } from 'mantine-datatable';
import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';


import { IRootState } from '@/store';
import { useSession } from 'next-auth/react';
import moment from 'moment';
import { getTranslation } from '../../../../i18n';
import { useRouter } from 'next/navigation';
import { useTheorytrainsGetDataQuery } from '@/services/theorytrains';

const pageCode = "theorytrains"
export const DetailsTheorytrainsComponent = () => {
    const { t }: any = getTranslation();
    const router = useRouter();
    const session = useSession();
    // const {
    //     open = "false",
    //     OrderBy = "Id",
    //     PageNo = 1,
    //     VoyageId,
    //     // Direction = OrdersDirectionType.Ascending,
    //     search = "",
    //     status = "",

    // } = router.query;
    const [sortStatus, setSortStatus] = useState<DataTableSortStatus>({
        columnAccessor: 'title',
        direction: 'desc'
    });
    const dispatch = useDispatch();


    const isDark = useSelector((state: IRootState) => state.themeConfig.theme) === 'dark';
    const [isMounted, setIsMounted] = useState(false);
    useEffect(() => {
        setIsMounted(true);
    }, []);

    const [pageNumber, setPageNumber] = useState(Number(1));

    const request = {
        page: pageNumber,
        paginate: 30,
        // ...search && { search: search as string },
        // ...status && { voyage_status: status as any }

    }


    const { isFetching, currentData: data } = useTheorytrainsGetDataQuery(request);



    // const [Search, setSearch] = useState(search)

    // const handleChange = (e: any) => {
    //     const value = e.target.value;
    //     setSearch(value);
    //     if (value == "") {
    //         handleSearch(value)
    //     }

    // };

    // const handleSearch = (value?: string) => {
    //     if (search != Search) {
    //         router.push({
    //             pathname: router.pathname,
    //             query: { ...router.query, search: value ?? Search },
    //         });
    //         setPageNumber(1)
    //     }

    // };
    // const handleKeyPress = (event: any) => {
    //     if (event.key === 'Enter') {
    //         handleSearch();
    //     }
    // };

    return (
        <div className={`m-4    rtl:transition-[left] ltr:transition-[right] duration-1000`}>
            <div className={'flex justify-between '}>
                <div className="text-xl uppercase ">
                    {t(pageCode)}
                </div>
                <div className={'flex gap-3'}>
                    {/* <input
                        value={Search ?? ''}
                        placeholder={`${t('search')} ...`}
                        onKeyDown={handleKeyPress}
                        onChange={handleChange}
                        id="search"
                        className="form-input text-white-dark"
                        name="search"
                    /> */}
                    <button
                        className="flex justify-center gap-1 items-center bg-primary border-primary/70 text-white hover:scale-[1.01] transition-transform py-1 px-2    rounded border "
                        onClick={() => {
                            router.push(pageCode + '/createOrUpdate');
                        }}
                    >
                        {/* <AddIcons className="h-4 w-4" /> */}
                        {t('add')}
                    </button>
                </div>
            </div>
            <div className="datatables pagination-padding mt-2">
                {isMounted && (
                    <DataTable
                        onRowClick={async (item) => {
                            router.push(pageCode + `/createOrUpdate?id=${item.record.id}`);
                        }}
                        fetching={isFetching}
                        className={`${isDark} table-hover whitespace-nowrap rounded-lg shadow-base `}
                        records={data?.details?.docs ?? [] as any}
                        columns={[

                            {
                                title: t('title'),
                                accessor: 'title',
                                // sortable: true ,
                            },
                            {
                                title: t('period'),
                                accessor: 'period',
                                // sortable: true ,
                            },
                            {
                                title: t('description'),
                                accessor: 'description',
                                // sortable: true ,
                            },
                            // {
                            //     title: t('status'),
                            //     accessor: 'status',
                            //     // sortable: true ,
                            //     render: (item) => (<span
                            //         className={` cursor-pointer rounded-md p-1 ltr:ml-2 rtl:ml-2 ${item.status == true ? 'bg-success-light text-success ' : "bg-danger-light text-danger"}`}>{t(item.status==true?"active":"inactive")}</span>)
                            // },


                        ]}
                        customLoader={<div className='loader'></div>}
                        noRecordsText={t('no-data')}
                        noRecordsIcon={<></>}
                        {...isFetching && { minHeight: 130 }}
                        sortStatus={sortStatus}
                        onSortStatusChange={(sort) => {
                            // setSortStatus(sort);
                            // router.push({
                            //     pathname: router.pathname,
                            //     query: {
                            //         ...router.query,
                            //         Direction: sort.direction == 'desc',
                            //         OrderBy: sort.columnAccessor
                            //     }
                            // });
                        }}
                        totalRecords={data?.details?.total}
                        recordsPerPage={30}

                        page={pageNumber}
                        onPageChange={(p) => {
                            setPageNumber(p);
                        }}
                    />
                )}
            </div>
        </div >

    )
        ;
};