import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Button, ListItem, Typography, Zoom } from '@mui/material';
import { Link, SCRoutes, useSCFetchCategories, useSCRouting } from '@selfcommunity/react-core';
import { useEffect, useState } from 'react';
import Category from '../Category';
import { FormattedMessage } from 'react-intl';
import { sortByAttr } from '@selfcommunity/utils';
import { styled } from '@mui/material/styles';
import classNames from 'classnames';
import { useThemeProps } from '@mui/system';
const PREFIX = 'SCDefaultDrawerContent';
const classes = {
    root: `${PREFIX}-root`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (_, styles) => styles.root
})(() => ({}));
export default function DefaultDrawerContent(inProps) {
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { className, CategoryItemProps = { showTooltip: true } } = props, rest = __rest(props, ["className", "CategoryItemProps"]);
    // HOOKS
    const { categories } = useSCFetchCategories();
    const [categoriesOrdered, setCategoriesOrdered] = useState([]);
    // ROUTING
    const scRoutingContext = useSCRouting();
    //STATE
    const [isHovered, setIsHovered] = useState({});
    // HANDLERS
    const handleMouseEnter = (index) => {
        setIsHovered((prevState) => {
            return Object.assign(Object.assign({}, prevState), { [index]: true });
        });
    };
    const handleMouseLeave = (index) => {
        setIsHovered((prevState) => {
            return Object.assign(Object.assign({}, prevState), { [index]: false });
        });
    };
    // Order categories
    useEffect(() => {
        setCategoriesOrdered(sortByAttr(categories, 'order'));
    }, [categories]);
    const getMouseEvents = (mouseEnter, mouseLeave) => ({
        onMouseEnter: mouseEnter,
        onMouseLeave: mouseLeave,
        onTouchStart: mouseEnter,
        onTouchMove: mouseLeave
    });
    //order
    return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsxs(Typography, Object.assign({ variant: "subtitle1" }, { children: [_jsx("span", { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" }) }), ' ', _jsx(Button, Object.assign({ variant: "text", component: Link, color: "secondary", to: scRoutingContext.url(SCRoutes.CATEGORIES_LIST_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.seeAll", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.seeAll" }) }))] })), categoriesOrdered.map((c, index) => (_jsx(Zoom, Object.assign({ in: true, style: { transform: isHovered[c.id] && 'scale(1.05)' } }, { children: _jsx(ListItem, { children: _jsx(Category, Object.assign({ ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, c) }, elevation: 0, category: c, actions: null }, CategoryItemProps, getMouseEvents(() => handleMouseEnter(c.id), () => handleMouseLeave(c.id)))) }, c.id) }), index)))] })));
}
