import { __rest } from "tslib";
import { jsx as _jsx } 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 IconButton from '@mui/material/IconButton';
import { useColorScheme } from '@mui/material/styles';
import clsx from 'clsx';
import { forwardRef } from 'react';
const BrightnessIcon = (props) => (_jsx("svg", Object.assign({ width: "24", height: "24", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, props, { children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) })));
const CrescentIcon = (props) => (_jsx("svg", Object.assign({ width: "24", height: "24", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, props, { children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) })));
/**
 * The Toggle to switch between the two palette modes: light (the default) and dark.
 *
 * Demos:
 *
 * - [Color Mode Toggle (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/theme-color-mode-toggle--overview)
 *
 * API:
 *
 * - [IconButton API](https://mui.com/material-ui/api/icon-button/)
 *
 * @remarks
 * - ✨ This is a custom component that is not available in the Material-UI library.
 * - ✔️ Props of the [ButtonBase](https://mui.com/material-ui/api/button-base/) component are also available.
 * - ✅ `component` prop is supported.
 * - ✅ The `ref` is forwarded to the root element.
 *
 * @template C - The type of the component.
 * @param props - The props for the ColorModeToggle component.
 * @param ref - The ref to be forwarded to the IconButton component.
 * @returns The rendered ColorModeToggle component.
 */
const ColorModeToggle = forwardRef((_a, ref) => {
    var { className } = _a, rest = __rest(_a, ["className"]);
    const { mode, setMode } = useColorScheme();
    return (_jsx(IconButton, Object.assign({ ref: ref, sx: { ml: 1 }, onClick: () => {
            setMode(mode === 'light' ? 'dark' : 'light');
        }, color: "inherit", className: clsx(
        /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
        'oxygen-color-mode-toggle', 'OxygenColorModeToggle-root', className) }, rest, { children: mode === 'light' ? (_jsx(BrightnessIcon, { className: "OxygenColorModeToggle-icon" })) : (_jsx(CrescentIcon, { className: "OxygenColorModeToggle-icon" })) })));
});
export default ColorModeToggle;
