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

import type { JSXElement } from "@coreai-ds/react-components";
import * as React from 'react';
import type { PopoverProps } from "@coreai-ds/react-components";
import { Popover } from "@coreai-ds/react-components";
import { PopoverTrigger } 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";
import { Link } from "@coreai-ds/react-components";

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>
    </div>);
};

export const InternalUpdateContent = (): JSXElement => {
    const [visible, setVisible] = React.useState(false);
    const focusRef = React.useRef<HTMLAnchorElement>(null);
    const changeContent = () => setVisible(true);
    const onOpenChange: PopoverProps['onOpenChange'] = (e, data) => {
        if (data.open === false) {
            setVisible(false);
        }
    };
    React.useEffect(() => {
        if (visible) {
            focusRef.current?.focus();
        }
    }, [visible]);
    return (<Popover onOpenChange={onOpenChange}>
      <PopoverTrigger disableButtonEnhancement>
        <Button>Popover trigger</Button>
      </PopoverTrigger>

      <PopoverSurface>
        <ExampleContent />

        {visible ? (<div>
            The second panel content{' '}
            <Link href="#" ref={focusRef}>
              and a link
            </Link>
          </div>) : (<div>
            <Button onClick={changeContent}>Action</Button>
          </div>)}
      </PopoverSurface>
    </Popover>);
};

export default InternalUpdateContent;