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

import * as React from 'react';
import { Portal } from "@coreai-ds/react-components";
import { ToggleButton } from "@coreai-ds/react-components";

export const Default = () => {
    const [mountNode, setMountNode] = React.useState<HTMLElement | null>(null);
    const [open, setOpen] = React.useState(false);
    const styles = /* css */ `
      .portal-default-example__container {
        display: flex;
        gap: var(--spacingHorizontalS);
      }

      .portal-default-example__controls {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 200px;
      }

      .portal-default-example__state {
        font-family: var(--fontFamilyMonospace);
        border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
        padding: var(--spacingHorizontalXS);
        text-align: center;
      }

      .portal-default-example__clipping-container {
        font-family: var(--fontFamilyBase);
        font-size: var(--fontSizeBase400);
        font-weight: var(--fontWeightSemibold);
        line-height: var(--lineHeightBase400);
        background-color: var(--colorNeutralBackground1);
        color: var(--colorNeutralForeground1);
        border: var(--strokeWidthThick) solid var(--colorNeutralStroke1);
        padding: var(--spacingVerticalXXL) var(--spacingHorizontalS);
        overflow: hidden;
      }

      .portal-default-example__portal-content {
        font-family: var(--fontFamilyBase);
        font-size: var(--fontSizeBase500);
        font-weight: var(--fontWeightSemibold);
        line-height: var(--lineHeightBase500);
        background-color: var(--colorBrandBackground2);
        color: var(--colorBrandForeground2);
        border: var(--strokeWidthThick) dashed var(--colorBrandStroke2);
        padding: var(--spacingVerticalM) var(--spacingHorizontalSNudge);
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="portal-default-example__container">
          <div className="portal-default-example__clipping-container">
            <span>Clipping parent container</span>

            {open && mountNode && (<Portal mountNode={mountNode}>
                <div className="portal-default-example__portal-content">Portal content</div>
              </Portal>)}
          </div>

          <div className="portal-default-example__controls">
            <ToggleButton checked={open} onClick={() => setOpen(!open)}>
              Toggle portal
            </ToggleButton>

            <code className="portal-default-example__state">
              {JSON.stringify({ open }, null, 2)}
            </code>
          </div>
        </div>

        <div ref={setMountNode}/>
      </>);
};

export default Default;