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

import type { JSXElement } from "@coreai-ds/react-components";
import * as React from 'react';
import { Tooltip } from "@coreai-ds/react-components";
import { Checkbox } from "@coreai-ds/react-components";

export const Controlled = (): JSXElement => {
    const [visible, setVisible] = React.useState(false);
    const [enabled, setEnabled] = React.useState(false);
    return (<Tooltip content="The checkbox controls whether the tooltip can show on hover or focus" relationship="description" visible={visible && enabled} onVisibleChange={(_ev, data) => setVisible(data.visible)}>
      <Checkbox label="Enable the tooltip" onChange={(_ev, { checked }) => setEnabled(!!checked)}/>
    </Tooltip>);
};

export default Controlled;