import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
 *
 * WSO2 LLC. licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
import clsx from 'clsx';
import { forwardRef } from 'react';
import Avatar from '../Avatar';
import Badge from '../Badge';
import Box from '../Box';
import CircularProgress from '../CircularProgress';

/**
 * The Circular Progress Avatar is a Avatar variant with a circular progress and a badge.
 *
 * Demos:
 *
 * // TODO: Move this demo to the Progress demo.
 * - [Circular Progress Avatar (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-circular-progress-avatar)
 *
 * API:
 *
 * - [CircularProgress API](https://mui.com/material-ui/api/circular-progress/)
 *
 * @remarks
 * - ✨ This is a custom component that is not available in the Material-UI library.
 * - ✔️ Props of the native component are also available.
 * - ❌ `component` prop is not supported.
 * - ✅ The `ref` is forwarded to the root element.
 *
 * @param props - The props for the CircularProgressAvatar component.
 * @param ref - The ref to be forwarded to the Box component.
 * @returns The rendered CircularProgressAvatar component.
 */
const CircularProgressAvatar = forwardRef((_a, ref) => {
    var { className, progress, badgeOptions, avatarOptions } = _a, rest = __rest(_a, ["className", "progress", "badgeOptions", "avatarOptions"]);
    return (_jsx(Box, Object.assign({ ref: ref, className: clsx(
        /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
        'oxygen-circular-progress-avatar', 'OxygenCircularProgress-avatar', className), role: "presentation" }, { children: _jsxs(Badge, Object.assign({ className: clsx(
            /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
            'oxygen-badge', 'OxygenCircularProgress-avatarBadge'), overlap: "circular", anchorOrigin: {
                horizontal: 'left',
                vertical: 'bottom',
            } }, badgeOptions, { children: [_jsx(Avatar, Object.assign({}, avatarOptions)), _jsx(CircularProgress, Object.assign({ "aria-label": "progress", size: 90, className: clsx(
                    /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
                    'oxygen-circular-progress', 'OxygenCircularProgress-main'), variant: "determinate", value: progress }, rest)), _jsx(CircularProgress, Object.assign({ "aria-label": "progress", size: 90, className: clsx(
                    /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
                    'oxygen-circular-progress frame', 'OxygenCircularProgress-frame'), variant: "determinate", value: 100 }, rest))] })) })));
});
export default CircularProgressAvatar;
function addCSS(css){var head = document.getElementsByTagName('head')[0];var s = document.createElement('style');s.setAttribute('type', 'text/css');s.appendChild(document.createTextNode(css));head.appendChild(s);}
addCSS("/**\n * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n.oxygen-circular-progress-avatar {\n  padding: 1rem;\n}\n.oxygen-circular-progress-avatar .oxygen-circular-progress {\n  position: absolute;\n  top: -6px;\n  left: -6px;\n  z-index: 1;\n  transform: scaleY(-1) rotate(90deg) !important;\n}\n.oxygen-circular-progress-avatar .oxygen-circular-progress.frame {\n  color: lightgrey;\n  z-index: 0;\n}\n.oxygen-circular-progress-avatar .oxygen-avatar {\n  width: 80px;\n  height: 80px;\n}\n.oxygen-circular-progress-avatar .oxygen-badge .MuiBadge-badge {\n  left: 50%;\n  border-radius: 3px;\n  padding: 0.5rem 1rem;\n  top: 70px;\n}");