// 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 * as React from 'react';
import { Toolbar } from "@coreai-ds/react-components";
import { Popover } from "@coreai-ds/react-components";
import { PopoverTrigger } from "@coreai-ds/react-components";
import { ToolbarButton } from "@coreai-ds/react-components";
import { Image24Regular } from "@fluentui/react-icons";
import { PopoverSurface } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { Table24Filled } from "@fluentui/react-icons";
import { MathFormatLinear24Regular } from "@fluentui/react-icons";
import { ToolbarDivider } from "@coreai-ds/react-components";

export const WithPopover = (props: Partial<ToolbarProps>): JSXElement => {
    const [open, setOpen] = React.useState<'first' | 'second' | 'third' | 'fourth' | undefined>();
    return (<Toolbar aria-label="with Popover" {...props} size="small">
      <Popover withArrow trapFocus open={open === 'first'} onOpenChange={(_, data) => setOpen(data.open ? 'first' : undefined)}>
        <PopoverTrigger disableButtonEnhancement>
          <ToolbarButton aria-label="Insert image" icon={<Image24Regular />}/>
        </PopoverTrigger>
        <PopoverSurface>
          <div>
            <h3>Insert Image</h3>
            <Button onClick={() => setOpen(undefined)}>Close</Button>
          </div>
        </PopoverSurface>
      </Popover>
      <Popover withArrow trapFocus open={open === 'second'} onOpenChange={(_, data) => setOpen(data.open ? 'second' : undefined)}>
        <PopoverTrigger disableButtonEnhancement>
          <ToolbarButton appearance="primary" icon={<Table24Filled />} aria-label="Insert Table"/>
        </PopoverTrigger>
        <PopoverSurface>
          <div>
            <h3>Insert Table</h3>
            <Button onClick={() => setOpen(undefined)}>Close</Button>
          </div>
        </PopoverSurface>
      </Popover>
      <Popover withArrow trapFocus open={open === 'third'} onOpenChange={(_, data) => setOpen(data.open ? 'third' : undefined)}>
        <PopoverTrigger disableButtonEnhancement>
          <ToolbarButton aria-label="Insert Formula" icon={<MathFormatLinear24Regular />}/>
        </PopoverTrigger>
        <PopoverSurface>
          <div>
            <h3>Insert Formula</h3>
            <Button onClick={() => setOpen(undefined)}>Close</Button>
          </div>
        </PopoverSurface>
      </Popover>
      <ToolbarDivider />
      <Popover withArrow trapFocus open={open === 'fourth'} onOpenChange={(_, data) => setOpen(data.open ? 'fourth' : undefined)}>
        <PopoverTrigger disableButtonEnhancement>
          <ToolbarButton>Quick Actions</ToolbarButton>
        </PopoverTrigger>
        <PopoverSurface>
          <div>
            <h3>Quick Actions</h3>
            <Button onClick={() => setOpen(undefined)}>Close</Button>
          </div>
        </PopoverSurface>
      </Popover>
    </Toolbar>);
};

export default WithPopover;