import { connect } from 'react-redux';

import { AddButton } from '../../common/AddButton';
import { TableCell, TableRow, TableSortLabel } from '@mui/material';
import { useNavigate } from 'react-router-dom';

const AdminGoodListHeader = ({ onSortChange, sort }) => {
    const navigate = useNavigate();

    return (
        <TableRow className="AdminGoodListHeader">
            <TableCell scope="col">
                <TableSortLabel
                    active={sort === '_id' || sort === '-_id'}
                    direction={sort === '_id' ? 'asc' : 'desc'}
                    onClick={() => onSortChange(sort === '_id' ? '-_id' : '_id')}
                >
                    #
                </TableSortLabel>
            </TableCell>
            <TableCell scope="col">
                <TableSortLabel
                    active={sort === 'name' || sort === '-name'}
                    direction={sort === 'name' ? 'asc' : 'desc'}
                    onClick={() => onSortChange(sort === 'name' ? '-name' : 'name')}
                >
                    Назва
                </TableSortLabel>
            </TableCell>
            <TableCell scope="col">Зображення</TableCell>
            <TableCell scope="col">
                <TableSortLabel
                    active={sort === 'price' || sort === '-price'}
                    direction={sort === 'price' ? 'asc' : 'desc'}
                    onClick={() => onSortChange(sort === 'price' ? '-price' : 'price')}
                >
                    Ціна
                </TableSortLabel>
            </TableCell>
            <TableCell scope="col">
                <TableSortLabel
                    active={sort === 'amount' || sort === '-amount'}
                    direction={sort === 'amount' ? 'asc' : 'desc'}
                    onClick={() => onSortChange(sort === 'amount' ? '-amount' : 'amount')}
                >
                    Кількість
                </TableSortLabel>
            </TableCell>
            <TableCell scope="col">Категорії</TableCell>
            <TableCell scope="col">
                <AddButton
                    onClick={() => {
                        navigate('/admin/good/');
                    }}
                />
            </TableCell>
        </TableRow>
    );
};

export { AdminGoodListHeader };