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

import type { JSXElement } from "@coreai-ds/react-components";
import { Popover } from "@coreai-ds/react-components";
import { PopoverTrigger } from "@coreai-ds/react-components";
import * as React from 'react';
import type { PopoverTriggerChildProps } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";
import { PopoverSurface } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";

const CustomPopoverTrigger = React.forwardRef<HTMLButtonElement, Partial<PopoverTriggerChildProps>>((props, ref) => {
    return (<Button {...props} ref={ref}>
      Custom Trigger
    </Button>);
});

const useStyles = makeStyles({
    contentHeader: {
        marginTop: '0',
    },
});

const ExampleContent = () => {
    const styles = useStyles();
    return (<div>
      <h3 className={styles.contentHeader}>Popover content</h3>

      <div>This is some popover content</div>
      <Button>Action</Button>
    </div>);
};

export const CustomTrigger = (): JSXElement => {
    return (<Popover>
      <PopoverTrigger>
        <CustomPopoverTrigger />
      </PopoverTrigger>
      <PopoverSurface>
        <ExampleContent />
      </PopoverSurface>
    </Popover>);
};

export default CustomTrigger;