// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { ToolbarProps } from "@coreai-ds/react-components";
import type { JSXElement } from "@coreai-ds/react-components";
import { Toolbar } from "@coreai-ds/react-components";
import { Tooltip } from "@coreai-ds/react-components";
import { ToolbarToggleButton } from "@coreai-ds/react-components";
import { TextBoldRegular } from "@fluentui/react-icons";
import { TextItalicRegular } from "@fluentui/react-icons";
import { TextUnderlineRegular } from "@fluentui/react-icons";
import { ToolbarDivider } from "@coreai-ds/react-components";
import { ToolbarButton } from "@coreai-ds/react-components";
import { HighlightFilled } from "@fluentui/react-icons";
import * as React from 'react';

export const WithTooltip = (props: Partial<ToolbarProps>): JSXElement => (<Toolbar aria-label="with Tooltip" {...props} size="small">
    <Tooltip content="Makes selected text Bold" relationship="description" withArrow>
      <ToolbarToggleButton aria-label="Bold" icon={<TextBoldRegular />} name="textOptions" value="bold"/>
    </Tooltip>
    <Tooltip content="Makes selected text Italic" relationship="description" withArrow>
      <ToolbarToggleButton aria-label="Italic" icon={<TextItalicRegular />} name="textOptions" value="italic"/>
    </Tooltip>
    <Tooltip content="Makes selected text Underline" relationship="description" withArrow>
      <ToolbarToggleButton aria-label="Underline" icon={<TextUnderlineRegular />} name="textOptions" value="underline"/>
    </Tooltip>
    <ToolbarDivider />
    <Tooltip content="Highlights the selected text" relationship="description" withArrow>
      <ToolbarButton aria-label="Highlight" icon={<HighlightFilled />}/>
    </Tooltip>
  </Toolbar>);

export default WithTooltip;