import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import AppsRounded from "@mui/icons-material/AppsRounded";
import FolderOutlined from "@mui/icons-material/FolderOutlined";
import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
import Box from "@mui/material/Box";
import ButtonBase from "@mui/material/ButtonBase";
import ClickAwayListener from "@mui/material/ClickAwayListener";
import Divider from "@mui/material/Divider";
import MenuItem from "@mui/material/MenuItem";
import MenuList from "@mui/material/MenuList";
import Paper from "@mui/material/Paper";
import Popper from "@mui/material/Popper";
import { BorderRadiusL, BorderRadiusM, Colors, IconXs, PadM, PadS, PadXl, PadXs, ShadowMenuElevation, SpacingXs } from "@uipath/apollo-core";
import react from "react";
import { useSafeLingui } from "../../../../i18n/index.js";
const FolderSwitcher = ({ folders, value, onChange, allFoldersLabel, showAllFolders = true })=>{
    const { _ } = useSafeLingui();
    const resolvedAllFoldersLabel = allFoldersLabel ?? _({
        id: 'modelPicker.folderSwitcher.allFolders',
        message: 'All folders'
    });
    const [anchorEl, setAnchorEl] = react.useState(null);
    const open = !!anchorEl;
    const current = folders.find((f)=>f.id === value);
    const isAll = null == value;
    return /*#__PURE__*/ jsxs(Fragment, {
        children: [
            /*#__PURE__*/ jsxs(ButtonBase, {
                onClick: (e)=>setAnchorEl(open ? null : e.currentTarget),
                focusRipple: true,
                "aria-haspopup": "menu",
                "aria-expanded": open,
                sx: {
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: PadM,
                    fontSize: 'var(--font-s-bold-size, 12px)',
                    fontWeight: 'var(--font-s-bold-weight, 600)',
                    lineHeight: 'var(--font-s-bold-line-height, 16px)',
                    color: `var(--color-primary, ${Colors.ColorBlue500})`,
                    backgroundColor: `var(--color-background-raised, ${Colors.ColorWhite})`,
                    border: '1px solid',
                    borderColor: `var(--color-border-de-emp, ${Colors.ColorGray300})`,
                    borderRadius: `var(--border-radius-l, ${BorderRadiusL})`,
                    px: PadXl,
                    py: PadM,
                    '&:hover': {
                        backgroundColor: `var(--color-background-hover, ${Colors.ColorBackgroundHoverLight})`
                    }
                },
                children: [
                    isAll ? /*#__PURE__*/ jsx(AppsRounded, {
                        sx: {
                            fontSize: IconXs,
                            color: 'inherit'
                        }
                    }) : /*#__PURE__*/ jsx(FolderOutlined, {
                        sx: {
                            fontSize: IconXs,
                            color: 'inherit'
                        }
                    }),
                    /*#__PURE__*/ jsx(Box, {
                        component: "span",
                        sx: {
                            whiteSpace: 'nowrap'
                        },
                        children: isAll ? resolvedAllFoldersLabel : current?.label ?? resolvedAllFoldersLabel
                    }),
                    /*#__PURE__*/ jsx(KeyboardArrowDown, {
                        sx: {
                            fontSize: IconXs,
                            color: `var(--color-foreground-de-emp, ${Colors.ColorGray550})`,
                            transition: 'transform 150ms',
                            transform: open ? 'rotate(180deg)' : 'rotate(0)'
                        }
                    })
                ]
            }),
            /*#__PURE__*/ jsx(Popper, {
                anchorEl: anchorEl,
                open: open,
                placement: "bottom-start",
                disablePortal: true,
                modifiers: [
                    {
                        name: 'offset',
                        options: {
                            offset: [
                                0,
                                4
                            ]
                        }
                    }
                ],
                style: {
                    zIndex: 10
                },
                children: /*#__PURE__*/ jsx(ClickAwayListener, {
                    onClickAway: ()=>setAnchorEl(null),
                    children: /*#__PURE__*/ jsx(Paper, {
                        elevation: 8,
                        sx: {
                            minWidth: 200,
                            borderRadius: `var(--border-radius-l, ${BorderRadiusL})`,
                            border: '1px solid',
                            borderColor: `var(--color-border-de-emp, ${Colors.ColorGray300})`,
                            backgroundColor: `var(--color-background-raised, ${Colors.ColorWhite})`,
                            boxShadow: `var(--shadow-menu-elevation, ${ShadowMenuElevation})`
                        },
                        children: /*#__PURE__*/ jsxs(MenuList, {
                            dense: true,
                            disablePadding: true,
                            sx: {
                                p: PadS
                            },
                            children: [
                                showAllFolders && /*#__PURE__*/ jsxs(Fragment, {
                                    children: [
                                        /*#__PURE__*/ jsxs(MenuItem, {
                                            selected: isAll,
                                            onClick: ()=>{
                                                onChange(null);
                                                setAnchorEl(null);
                                            },
                                            sx: {
                                                fontSize: 'var(--font-s-size, 12px)',
                                                gap: SpacingXs,
                                                py: PadM,
                                                borderRadius: `var(--border-radius-m, ${BorderRadiusM})`,
                                                color: `var(--color-foreground, ${Colors.ColorGray850})`
                                            },
                                            children: [
                                                /*#__PURE__*/ jsx(AppsRounded, {
                                                    sx: {
                                                        fontSize: IconXs,
                                                        color: `var(--color-foreground-de-emp, ${Colors.ColorGray550})`
                                                    }
                                                }),
                                                resolvedAllFoldersLabel
                                            ]
                                        }, "__all"),
                                        /*#__PURE__*/ jsx(Divider, {
                                            sx: {
                                                my: PadXs
                                            }
                                        })
                                    ]
                                }),
                                folders.map((f)=>/*#__PURE__*/ jsxs(MenuItem, {
                                        selected: value === f.id,
                                        onClick: ()=>{
                                            onChange(f.id);
                                            setAnchorEl(null);
                                        },
                                        sx: {
                                            fontSize: 'var(--font-s-size, 12px)',
                                            gap: SpacingXs,
                                            py: PadM,
                                            borderRadius: `var(--border-radius-m, ${BorderRadiusM})`,
                                            color: `var(--color-foreground, ${Colors.ColorGray850})`
                                        },
                                        children: [
                                            /*#__PURE__*/ jsx(FolderOutlined, {
                                                sx: {
                                                    fontSize: IconXs,
                                                    color: `var(--color-foreground-de-emp, ${Colors.ColorGray550})`
                                                }
                                            }),
                                            f.label
                                        ]
                                    }, f.id))
                            ]
                        })
                    })
                })
            })
        ]
    });
};
export { FolderSwitcher };
