'use client';

import { MyTable, ColumnData } from '@/components/common/MyTable';
import BaseButton from '@/components/ui-kit/BaseButton';
import BasePagination from '@/components/ui-kit/BasePagination';
import { staff_requests } from '@/data/staff/staff.requests';
import { User } from '@/data/user/user.model';
import { DEFAULT_PAGE_SIZE, pageLinks } from '@/helpers/constants';
import { useMyTranslation } from '@/hooks/useMyTranslation';
import useRequest from '@/hooks/useRequest';
import CreateStaffModal from '@/routes/private/staffs/components/CreateStaffModal';
import { Add } from '@mui/icons-material';
import { Box, Stack, Typography } from '@mui/material';
import React, { useCallback, useMemo, useState } from 'react';

type Props = {};

const DashboardStaffsPage = (props: Props) => {
    const t = useMyTranslation();
    const [page, setPage] = useState(1);
    const [pageSize] = useState(DEFAULT_PAGE_SIZE);
    const [modal, setModal] = useState<null | 'create_staff'>(null);

    const getStaffsQuery = useRequest(
        () =>
            staff_requests.getAll({
                page: page,
            }),
        {
            selectData(data) {
                return data.data.data;
            },
            dependencies: [page],
        }
    );

    const {
        data: list,
        totalElements,
        totalPages,
    } = useMemo(() => {
        if (getStaffsQuery.data?.data) {
            return {
                data: getStaffsQuery.data.data,
                totalElements: getStaffsQuery.data.totalElements,
                totalPages: getStaffsQuery.data.totalPages,
            };
        } else {
            return {
                data: [],
                totalElements: 0,
                totalPages: 0,
            };
        }
    }, [getStaffsQuery]);
    const loading = getStaffsQuery.loading;

    const handleChange = (newPage: number) => {
        setPage(newPage);
    };

    const openCreateModal = () => {
        setModal('create_staff');
    };

    const closeModal = () => {
        setModal(null);
    };

    const onSuccessCreate = useCallback(() => {
        getStaffsQuery.refetch();
        closeModal();
    }, []);

    const columns: ColumnData<User>[] = [
        {
            label: t('No'),
            width: 100,
            renderCell(data, rowIndex) {
                return (page - 1) * pageSize + rowIndex + 1;
            },
        },
        {
            dataKey: 'id',
            label: t('id'),
            width: 100,
        },
        {
            dataKey: 'username',
            label: t('username'),
            width: 300,
        },
        {
            dataKey: 'fullName',
            label: t('fullName'),
            width: 300,
        },
        {
            dataKey: 'phone',
            label: t('phone'),
            width: 300,
        },
        {
            dataKey: 'role',
            label: t('role'),
            width: 300,
        },
        {
            dataKey: 'active',
            label: t('status'),
            width: 300,
            renderCell(data, rowIndex) {
                return data.active ? t('active') : t('not_active');
            },
        },
        // {
        //     label: '', //t('actions'),
        //     width: 100,
        //     numeric: true,
        //     renderCell(data, rowIndex) {
        //         return (
        //             <ActionPopMenu
        //                 buttons={[
        //                     {
        //                         icon: <AddCircleOutline />,
        //                         label: t('add_box'),
        //                         onClick: () => {},
        //                     },
        //                     {
        //                         icon: <Edit />,
        //                         label: t('edit'),
        //                         onClick: () => {},
        //                     },
        //                     {
        //                         icon: <Delete />,
        //                         label: t('delete'),
        //                         onClick: () => {},
        //                     },
        //                 ]}
        //             />
        //         );
        //     },
        // },
    ];

    return (
        <Box>
            <Stack direction={'row'} mb={3}>
                <BaseButton colorVariant='blue' startIcon={<Add />} onClick={openCreateModal}>
                    {t('create_staff')}
                </BaseButton>
            </Stack>
            <Box
                width={1}
                mb={3}
                sx={{
                    padding: '28px',
                    borderRadius: '16px',
                    backgroundColor: '#fff',
                }}
            >
                <Stack mb={3.5} direction={'row'} justifyContent={'space-between'} alignItems={'center'}>
                    <Typography
                        sx={{
                            fontSize: '20px',
                            lineHeight: '24px',
                            fontWeight: 600,
                            textTransform: 'capitalize',
                            color: '#000',
                        }}
                    >
                        {t('staffs')}
                    </Typography>
                    {/* <Stack direction={'row'} alignItems={'center'} spacing={2}>
                        <BaseInput
                            InputProps={{
                                startAdornment: <Search color='primary' />,
                            }}
                            placeholder={t('search')}
                        />

                        <BaseButton colorVariant='gray' startIcon={<FilterListOff />} size='small'>
                            {t('reset_filter')}
                        </BaseButton>
                    </Stack> */}
                </Stack>
                <Box mb={6}>
                    <MyTable columns={columns} data={list} loading={loading} />
                </Box>
                <Stack direction={'row'} justifyContent={'center'}>
                    <BasePagination page={page} pageSize={pageSize} totalCount={totalElements} onChange={handleChange} />
                </Stack>
            </Box>
            {modal === 'create_staff' && <CreateStaffModal open onClose={closeModal} onSuccess={onSuccessCreate} />}
        </Box>
    );
};

export default DashboardStaffsPage;
