import { Story, Meta, html } from '@open-wc/demoing-storybook';
import {
  OverlayMixin,
  withBottomSheetConfig,
  withDropdownConfig,
  withModalDialogConfig,
} from '../index.js';

import './demo-overlay-system.js';
import './applyDemoOverlayStyles.js';
import { ref as r } from './directives/ref.js';

<Meta title="Overlays/System/Overview" parameters={{ component: 'demo-overlay-system' }} />

# Overlay System

The overlay system allows to create different types of overlays like dialogs, toasts, tooltips,
dropdown, etc.
It's designed to be highly flexible, while still delivering sensible defaults.
On top of this, the system was built having accessibility in mind.

For a detailed rationale, please consult [Rationale](?path=/docs/overlay-rationale--page).

<Story name="Default">
  {html`
    <demo-overlay-system>
      <button slot="invoker">Click me to open the overlay!</button>
      <div slot="content" class="demo-overlay">
          Hello! You can close this notification here:
          <button
            @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
          >
            ⨯
          </button>
      </div>
    </demo-overlay-system>
  `}
</Story>

```html
<demo-overlay-system>
  <button slot="invoker">Click me to open the overlay!</button>
  <div slot="content" class="demo-overlay">
    Hello! You can close this notification here:
    <button
      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
    >
      ⨯
    </button>
  </div>
</demo-overlay-system>
```

## Features
- support for various types of (preconfigured) overlays
- accessibility out of the box
- advanced positioning for both 'local' and 'global' overlays
- highly configurable/customizable
- a base mixin that can be used to build your own overlay web components

## How to use

### Installation

```sh
npm i --save @lion/overlays
```

The '@lion/overlays' package should only be used by **subclassers** who want to either:
- Use OverlayMixin to create Web Components that use OverlayController under the hood (common use case)
- Extend or use OverlayController

Next we will go in depth into the three main layers of our overlay system:
- OverlayController, handles logic of a single overlay instance
- OverlayMixin, an easy way to create a Web Component that acts as an overlay
- OverlaysManager, handles logic which requires knowledge of all active overlays

## OverlayController

OverlayController is the single class we instantiate whenever creating an overlay instance.
Based on provided config, it will handle:

- DOM position (local vs global)
- positioning logic
- accessibility
- interaction patterns

and has the following public functions:

- **show()**, to show the overlay
- **hide()**, to hide the overlay
- **toggle()**, to toggle between show and hide

All overlays contain an invokerNode and a contentNode

- **contentNode**, the toggleable content of the overlay
- **invokerNode**, the element toggles the visibility of the content. For local overlays, this is the relative element the content is positioned to

For DOM position, local refers to overlays where the content is positioned next to the invokers they are related to, DOM-wise.
Global refers to overlays where the content is positioned in a global root node at the bottom of `<body>`.

## Configuration

Overlays can be configured in many ways to suit your needs. We go in-depth into each option in the Overlay System - Configuration chapter.

We also export a few preset configuration objects, which you can find [here](?path=/docs/overlays-system-configuration).

- withModalDialogConfig
- withDropdownConfig
- withBottomSheetConfig

You import these using ES Modules, and then simply call them inside your `OverlayController` instantiation:

```js
const ctrl = new OverlayController({
  ...withModalDialogConfig(),
  invokerNode,
  contentNode,
});
```

or in your Web Component with `OverlayMixin`, make sure you override these methods to:

- Define configuration
- Handle setting up event listeners of toggling the opened state of your overlay
- Handle the tearing down of those event listeners
- Define a template which includes
  - invoker slot for your user to provide the invoker node (the element that invokes the overlay content)
  - content slot for your user to provide the content that shows when the overlay is opened
  - _overlay-shadow-outlet, this slot is currently necessary under the hood for acting as a wrapper element for placement purposes, but is not something your end user should be concerned with, unless they are extending your component.

```js
_defineOverlayConfig() {
  return {
    ...withModalDialogConfig
  };
}

_setupOpenCloseListeners() {
  super._setupOpenCloseListeners();
  this.__toggle = () => {
    this.opened = !this.opened;
  };

  if (this._overlayInvokerNode) {
    this._overlayInvokerNode.addEventListener('click', this.__toggle);
  }
}

_teardownOpenCloseListeners() {
  super._teardownOpenCloseListeners();

  if (this._overlayInvokerNode) {
    this._overlayInvokerNode.removeEventListener('click', this.__toggle);
  }
}

render() {
  return html`
    <slot name="invoker"></slot>
    <slot name="content"></slot>
    <slot name="_overlay-shadow-outlet"></slot>
  `;
}
```

or declaratively in your template with the `.config` property

```html
<demo-overlay-system .config=${{ ...withModalDialogConfig() }}>
  <button slot="invoker">Click me to open the overlay!</button>
  <div slot="content" class="demo-overlay">
    Hello! You can close this notification here:
    <button
      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
    >
      ⨯
    </button>
  </div>
</demo-overlay-system>
```

### Responsive switching

Currently we support switching between overlay configurations.
Keep in mind however that we do not yet support switching between overlay configurations while the content is shown.
If you try, it will close the content if it is open, and the user will need to re-open.
Will be supported in the near future.

This can be done declaratively as shown below.
Drag the viewport under 600px and open the overlay to see the `withBottomSheetConfig` applied.

<Story name="Responsive switching">
  {html`
    <demo-overlay-system
      .config=${{ ...withBottomSheetConfig() }}
      @before-opened=${e => {
        if (window.innerWidth >= 600) {
          e.target.config = { ...withModalDialogConfig() };
        } else {
          e.target.config = { ...withBottomSheetConfig() };
        }
      }}
    >
      <button slot="invoker">Click me to open the overlay!</button>
      <div slot="content" class="demo-overlay">
        Hello! You can close this notification here:
        <button
          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
        >
          ⨯
        </button>
      </div>
    </demo-overlay-system>
  `}
</Story>

```html
<demo-overlay-system
  .config=${{ ...withBottomSheetConfig() }}
  @before-opened=${e => {
    if (window.innerWidth >= 600) {
      e.target.config = { ...withModalDialogConfig() };
    } else {
      e.target.config = { ...withBottomSheetConfig() };
    }
  }}
>
  <button slot="invoker">Click me to open the overlay!</button>
  <div slot="content" class="demo-overlay">
    Hello! You can close this notification here:
    <button
      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
    >
      ⨯
    </button>
  </div>
</demo-overlay-system>
```

Alternative ways to do it is by setting the event listener manually on the `OverlayController` instance.

```js
myOverlayCtrl.addEventListener('before-show', () => {
  if (window.innerWidth >= 600) {
    ctrl.updateConfig(withModalDialogConfig());
  } else {
    ctrl.updateConfig(withBottomSheetConfig());
  }
});
```

Or inside of a Web Component that uses the `OverlayMixin`, by overriding protected method `_defineOverlay`,
where we can access the OverlayController instance and use the `updateConfig` method on the controller:

```js
_defineOverlay({ invokerNode, contentNode }) {

  // initial
  const ctrl = new OverlayController({
    ...withBottomSheetConfig(),
    hidesOnOutsideClick: true,
    invokerNode,
    contentNode,
  });

  // responsive
  ctrl.addEventListener('before-show', () => {
    if (window.innerWidth >= 600) {
      ctrl.updateConfig(withModalDialogConfig());
    } else {
      ctrl.updateConfig(withBottomSheetConfig());
    }
  });

  return ctrl;
```

Below is another demo where you can toggle between configurations using buttons.

<Story name="Responsive Switching 2">
  {html`
    <style>
      .buttons button:not(:first-child) {
        margin: 10px;
      }
    </style>
    Change config to:
    <div class="buttons">
      <button @click=${() => { document.getElementById('respSwitchOverlay').config = { ...withModalDialogConfig() } }}>
        Modal Dialog
      </button>
      <button @click=${() => { document.getElementById('respSwitchOverlay').config = { ...withBottomSheetConfig() } }}>
        Bottom Sheet
      </button>
      <button @click=${() => { document.getElementById('respSwitchOverlay').config = { ...withDropdownConfig() } }}>
        Dropdown
      </button>
    </div>
    <demo-overlay-system id="respSwitchOverlay" .config=${{ ...withBottomSheetConfig() }}>
      <button slot="invoker">Click me to open the overlay!</button>
      <div slot="content" class="demo-overlay">
        Hello! You can close this notification here:
        <button
          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
        >
          ⨯
        </button>
      </div>
    </demo-overlay-system>
  `}
</Story>

```js
import { withModalDialogConfig, withBottomSheetConfig, withDropdownConfig } from '@lion/overlays';
```

```html
Change config to:
<div class="buttons">
  <button @click=${() => { document.getElementById('respSwitchOverlay').config = { ...withModalDialogConfig() } }}>
    Modal Dialog
  </button>
  <button @click=${() => { document.getElementById('respSwitchOverlay').config = { ...withBottomSheetConfig() } }}>
    Bottom Sheet
  </button>
  <button @click=${() => { document.getElementById('respSwitchOverlay').config = { ...withDropdownConfig() } }}>
    Dropdown
  </button>
</div>
<demo-overlay-system id="respSwitchOverlay" .config=${{ ...withBottomSheetConfig() }}>
  <button slot="invoker">Click me to open the overlay!</button>
  <div slot="content" class="demo-overlay">
    Hello! You can close this notification here:
    <button
      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
    >
      ⨯
    </button>
  </div>
</demo-overlay-system>
```

## Opened state

For any overlay that implements the OverlayMixin, there is a Boolean property `opened` that reflects
whether the overlay content is displayed or not.

You can also listen to the event `opened-changed` which is fired whenever `opened` is toggled.
This can be useful e.g. if somewhere in your application you need to rely on this "state".

<Story name="Opened state">
  {() => {
    const appState = {
      opened: false,
    };
    const refs = {};
    function onOpenClosed(ev) {
      appState.opened = ev.target.opened;
      refs.openedState.innerText = appState.opened;
    }
    return html`
      appState.opened: <span #openedState=${r(refs)}>${appState.opened}</span>
      <demo-overlay-system .opened="${appState.opened}" @opened-changed=${onOpenClosed}>
        <button slot="invoker">Overlay</button>
        <div slot="content" class="demo-overlay">
          Hello! You can close this notification here:
          <button
            @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
          >
            ⨯
          </button>
        </div>
      </demo-overlay-system>
    `;
  }}
</Story>

```js
const appState = {
  opened: false,
};

// Function that syncs our appState (and also Node reference to make it visible in our demo)
function onOpenClosed(ev) {
  appState.opened = ev.target.opened;
  openedStateNode.innerText = appState.opened;
}
```

```html
<div>
  appState.opened: ${openedStateNode}
</div>
<demo-overlay-system .opened="${appState.opened}" @opened-changed=${onOpenClosed}>
  <button slot="invoker">Overlay</button>
  <div slot="content" class="demo-overlay">
    Hello! You can close this notification here:
    <button
      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
    >
      ⨯
    </button>
  </div>
</demo-overlay-system>
```

## Intercepting open/close

It is possible to intercept the open/close process by calling `.preventDefault()` on
the `before-close` or `before-open` events.

<Story name="Intercept open/close">
  {() => {
    // Application code
    let blockOverlay = true;
    const refs = {};
    function intercept(ev) {
      if (blockOverlay) {
        ev.preventDefault();
      }
    }
    return html`
      Overlay blocked state:
      <button #statusButton=${r(refs)} @click="${() => {
        blockOverlay = !blockOverlay;
        refs.statusButton.textContent = blockOverlay;
      }}">${blockOverlay}</button>
      <demo-overlay-system #overlay=${r(refs)} @before-closed=${intercept} @before-opened=${intercept}>
        <button slot="invoker" @click=${() => console.log('blockOverlay', blockOverlay, 'opened', refs.overlay.opened)}>Overlay</button>
        <div slot="content" class="demo-overlay">
          Hello! You can close this notification here:
          <button @click=${() => refs.overlay.opened = false}>⨯</button>
        </div>
      </demo-overlay-system>
    `;
  }}
</Story>

```js
  // Application code
  const refs = {};
  function intercept(ev) {
    if (blockOverlay) {
      ev.preventDefault();
    }
  }
```

```html
  <demo-overlay-system #overlay=${r(refs)} @before-closed=${intercept} @before-opened=${intercept}>
    <button slot="invoker">Overlay</button>
    <div slot="content" class="demo-overlay">
      Hello! You can close this notification here:
      <button @click=${() => refs.overlay.opened = false}>⨯</button>
    </div>
  </demo-overlay-system>
```


## OverlayMixin

OverlayMixin is a mixin anyone can use to create a Web Component which has a
`content node` (`slot="content"`) and `invoker node` (`slot="invoker"`).

Under the hood, the `OverlayMixin` will instantiate an OverlayController with these nodes.

By default, there are only a few `OverlayMixin` methods you need to override to create a working Web Component using an overlay:

- `render`, the template needs to include a `<slot name="content">`, `<slot name="invoker">` and `<slot name="_overlay-shadow-outlet">`.
- `_defineOverlayConfig`, in this protected method, return an object that contains the default configuration for your Web Component's overlay. See configuration section of OverlayController.
- `_setupOpenCloseListeners`, use this lifecycle hook to setup the open and close event listeners on your `_overlayInvokerNode`.
- `_teardownOpenCloseListeners`, use this lifecycle hook to ensure that the listeners are removed when the OverlayController is tearing down. For example when the Web Component is disconnected from the DOM.

```js
import { LitElement } from '@lion/core';
import { OverlayMixin } from '@lion/overlays';

class MyOverlayWC extends OverlayMixin(LitElement) {
  _defineOverlayConfig() {
    return {
      placementMode: 'global',
      hasBackdrop: true,
    };
  }

  _setupOpenCloseListeners() {
    super._setupOpenCloseListeners();
    this.__toggle = () => {
      // opened is the public boolean property to use in the WC for opening/closing
      this.opened = !this.opened;
    };

    // Always guard this, because your user may toggle the opened state through something else (e.g. event) and not an invoker node.
    if (this._overlayInvokerNode) {
      this._overlayInvokerNode.addEventListener('click', this.__toggle);
    }
  }

  _teardownOpenCloseListeners() {
    super._teardownOpenCloseListeners();

    if (this._overlayInvokerNode) {
      this._overlayInvokerNode.removeEventListener('click', this.__toggle);
    }
  }

  render() {
    return html`
      <slot name="invoker"></slot>
      <slot name="content"></slot>
      <slot name="_overlay-shadow-outlet"></slot>
    `;
  }
}
```

## OverlaysManager

The `OverlaysManager` is a global registry keeping track of all different types of overlays.
The need for a global housekeeping mainly arises when multiple overlays are opened simultaneously.

For example, you may have a modal dialog that open another modal dialog.
The second dialog needs to block the first.
When the second dialog is closed, the first one is available again.

The overlay manager keeps track of all registered overlays and controls which one to show.

Below an example is shown with the `isBlocking` option, which makes use of the OverlaysManager's capabilities.

<Story name="OverlaysManager">
  {html`
    <demo-overlay-system .config=${{ hasBackdrop: true }}>
      <button slot="invoker">Click me to open the overlay!</button>
      <div slot="content" class="demo-overlay">
        Hello! You can close this notification here:
        <button
          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
        >
          ⨯
        </button>
        <div>
          <button @click=${() => document.getElementById('secondOverlay').opened = true }>Click me to open another overlay which is blocking</button>
        </div>
      </div>
    </demo-overlay-system>
    <demo-overlay-system id="secondOverlay" .config=${{ hasBackdrop: true, isBlocking: true }}>
      <div slot="content" class="demo-overlay demo-overlay--second">
        Hello! You can close this notification here:
        <button
          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
        >
          ⨯
        </button>
      </div>
    </demo-overlay-system>
  `}
</Story>

```html
<demo-overlay-system .config=${{ hasBackdrop: true }}>
  <button slot="invoker">Click me to open the overlay!</button>
  <div slot="content" class="demo-overlay">
    Hello! You can close this notification here:
    <button
      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
    >
      ⨯
    </button>
    <div>
      <button @click=${() => document.getElementById('secondOverlay').opened = true }>Click me to open another overlay which is blocking</button>
    </div>
  </div>
</demo-overlay-system>

<demo-overlay-system id="secondOverlay" .config=${{ hasBackdrop: true, isBlocking: true }}>
  <div slot="content" class="demo-overlay demo-overlay--second">
    Hello! You can close this notification here:
    <button
      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
    >
      ⨯
    </button>
  </div>
</demo-overlay-system>
```
