import { css, LitElement, render } from '@lion/core';
import { html, storiesOf, withKnobs } from '@open-wc/demoing-storybook';
import {
  OverlayMixin,
  withBottomSheetConfig,
  withDropdownConfig,
  withModalDialogConfig,
} from '../index.js';

function renderOffline(litHtmlTemplate) {
  const offlineRenderContainer = document.createElement('div');
  render(litHtmlTemplate, offlineRenderContainer);
  return offlineRenderContainer.firstElementChild;
}

// Currently toggling while opened doesn't work (see OverlayController)
/*
let toggledPlacement = 'top';
const togglePlacement = popupController => {
  const placements = [
    'top-end',
    'top',
    'top-start',
    'right-end',
    'right',
    'right-start',
    'bottom-start',
    'bottom',
    'bottom-end',
    'left-start',
    'left',
    'left-end',
  ];
  toggledPlacement = placements[(placements.indexOf(toggledPlacement) + 1) % placements.length];
  popupController.updateConfig({ togglePlacement });
};
*/

const overlayDemoStyle = css`
  .demo-box {
    width: 200px;
    background-color: white;
    border-radius: 2px;
    border: 1px solid grey;
    padding: 8px;
  }

  .demo-box_placements {
    display: flex;
    flex-direction: column;
    width: 173px;
    margin: 0 auto;
    margin-top: 68px;
  }

  lion-demo-overlay {
    padding: 10px;
  }

  .close-button {
    color: black;
    font-size: 28px;
    line-height: 28px;
  }

  .demo-box__column {
    display: flex;
    flex-direction: column;
  }

  .demo-overlay {
    display: block;
    position: absolute;
    font-size: 16px;
    color: white;
    background-color: black;
    border-radius: 4px;
    padding: 8px;
  }

  .demo-overlay button {
    color: black;
  }

  .demo-popup {
    padding: 10px;
    border: 1px solid black;
  }
`;

customElements.define(
  'lion-demo-overlay',
  class extends OverlayMixin(LitElement) {
    // eslint-disable-next-line class-methods-use-this
    _defineOverlayConfig() {
      return {
        placementMode: 'global', // have to set a default
      };
    }

    _setupOpenCloseListeners() {
      super._setupOpenCloseListeners();
      this.__toggle = () => {
        this.opened = !this.opened;
      };
      this._overlayInvokerNode.addEventListener('click', this.__toggle);
    }

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

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

storiesOf('Overlay System | Overlay as a WC', module)
  .addDecorator(withKnobs)
  .add(
    'Default',
    () => html`
      <style>
        ${overlayDemoStyle}
      </style>
      <p>
        Important note: For <code>placementMode: 'global'</code>, your
        <code>slot="content"</code> gets moved to global overlay container. After initialization it
        is no longer a child of <code>lion-demo-overlay</code>
      </p>
      <p>
        To close your overlay from some action performed inside the content slot, fire a
        <code>hide</code> event.
      </p>
      <p>
        For the overlay to close, it will need to bubble to the content slot (use
        <code>bubbles: true</code>. If absolutely needed <code>composed: true</code> can be used to
        traverse shadow boundaries)
      </p>
      <p>The demo below demonstrates this</p>
      <div class="demo-box">
        <lion-demo-overlay>
          <button slot="invoker">Overlay</button>
          <div slot="content" class="demo-overlay">
            Hello! You can close this notification here:
            <button
              class="close-button"
              @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
            >
              ⨯
            </button>
          </div>
        </lion-demo-overlay>
      </div>
    `,
  )
  .add('Global placement configuration', () => {
    const overlay = placement => html`
      <lion-demo-overlay
        .config=${{ hasBackdrop: true, trapsKeyboardFocus: true, viewportConfig: { placement } }}
      >
        <button slot="invoker">Overlay ${placement}</button>
        <div slot="content" class="demo-overlay">
          Hello! You can close this notification here:
          <button
            class="close-button"
            @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
          >
            ⨯
          </button>
        </div>
      </lion-demo-overlay>
    `;

    return html`
      <style>
        ${overlayDemoStyle}
      </style>
      <div class="demo-box_placements">
        ${overlay('center')} ${overlay('top-left')} ${overlay('top-right')}
        ${overlay('bottom-left')} ${overlay('bottom-right')}
      </div>
    `;
  })
  .add(
    'Nested overlays',
    () => html`
      <style>
        ${overlayDemoStyle}
      </style>
      <lion-demo-overlay .config=${{ ...withModalDialogConfig() }}>
        <button slot="invoker">Overlay</button>
        <div slot="content" class="demo-overlay">
          <div>
            Hello! This is a notification.
            <button
              @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
            >
              Close
            </button>
            <lion-demo-overlay
              .config=${{ ...withModalDialogConfig(), viewportConfig: { placement: 'top' } }}
            >
              <button slot="invoker">Open child</button>
              <div slot="content" class="demo-overlay">
                Hello! You can close this notification here:
                <button
                  class="close-button"
                  @click=${e =>
                    e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
                >
                  ⨯
                </button>
              </div>
            </lion-demo-overlay>
          </div>
        </div>
      </lion-demo-overlay>
    `,
  )
  .add(
    'Local placementMode',
    () => html`
      <style>
        ${overlayDemoStyle}
      </style>
      <div class="demo-box_placements">
        <lion-demo-overlay
          .config=${{ placementMode: 'local', popperConfig: { placement: 'bottom-start' } }}
        >
          <button slot="invoker">Overlay</button>
          <div slot="content" class="demo-overlay">
            Hello! You can close this notification here:
            <button
              class="close-button"
              @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
            >
              ⨯
            </button>
          </div>
        </lion-demo-overlay>
      </div>
    `,
  )
  .add(
    'Override the popper config',
    () => html`
      <style>
        ${overlayDemoStyle}
      </style>
      <div>
        The API is aligned with Popper.js, visit their documentation for more information:
        <a href="https://popper.js.org/popper-documentation.html">Popper.js Docs</a>
      </div>
      <div class="demo-box_placements">
        <lion-demo-overlay
          .config=${{
            placementMode: 'local',
            hidesOnEsc: true,
            hidesOnOutsideClick: true,
            popperConfig: {
              placement: 'bottom-end',
              positionFixed: true,
              modifiers: {
                keepTogether: {
                  enabled: true /* Prevents detachment of content element from reference element */,
                },
                preventOverflow: {
                  enabled: true /* disables shifting/sliding behavior on secondary axis */,
                  boundariesElement: 'viewport',
                  padding: 32 /* when enabled, this is the viewport-margin for shifting/sliding on secondary axis */,
                },
                hide: {
                  /* must come AFTER preventOverflow option */
                  enabled: false /* disables hiding behavior when reference element is outside of popper boundaries */,
                },
                offset: {
                  enabled: true,
                  offset: `0, 16px` /* horizontal and vertical margin (distance between popper and referenceElement) */,
                },
              },
            },
          }}
        >
          <div slot="content" class="demo-popup">United Kingdom</div>
          <button slot="invoker">
            UK
          </button>
        </lion-demo-overlay>
      </div>
    `,
  )
  .add('Switch overlays configuration', () => {
    const overlay = renderOffline(html`
      <lion-demo-overlay .config=${{ ...withBottomSheetConfig() }}>
        <button slot="invoker">Overlay</button>
        <div slot="content" class="demo-overlay">
          Hello! You can close this notification here:
          <button
            class="close-button"
            @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
          >
            ⨯
          </button>
        </div>
      </lion-demo-overlay>
    `);

    return html`
      <style>
        ${overlayDemoStyle}
      </style>
      <div>
        <button
          @click=${() => {
            overlay.config = {
              ...withModalDialogConfig(),
            };
          }}
        >
          modal dialog
        </button>
        <button
          @click=${() => {
            overlay.config = {
              ...withBottomSheetConfig(),
            };
          }}
        >
          bottom sheet
        </button>
        <button
          @click=${() => {
            overlay.config = {
              ...withDropdownConfig(),
            };
          }}
        >
          dropdown
        </button>
      </div>
      <div class="demo-box_placements">
        ${overlay}
      </div>
    `;
  })
  .add(
    'Responsive switching',
    () => html`
      <style>
        ${overlayDemoStyle}
      </style>
      <p>Open the overlay on a big screen and it will be a dialog</p>
      <p>Close and open it again on a small screen (< 600px) and it will be a bottom sheet</p>
      <lion-demo-overlay
        .config=${{ ...withBottomSheetConfig() }}
        @before-opened=${e => {
          if (window.innerWidth >= 600) {
            e.target.config = { ...withModalDialogConfig() };
          } else {
            e.target.config = { ...withBottomSheetConfig() };
          }
        }}
      >
        <button slot="invoker">Overlay</button>
        <div slot="content" class="demo-overlay">
          Hello! You can close this notification here:
          <button
            class="close-button"
            @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
          >
            ⨯
          </button>
        </div>
      </lion-demo-overlay>
    `,
  )
  .add('On hover', () => {
    const popup = renderOffline(html`
      <lion-demo-overlay
        .config=${{
          placementMode: 'local',
          hidesOnEsc: true,
          hidesOnOutsideClick: true,
          popperConfig: {
            placement: 'bottom',
          },
        }}
      >
        <span
          slot="invoker"
          @mouseenter=${() => {
            popup.opened = true;
          }}
          @mouseleave=${() => {
            popup.opened = false;
          }}
          >UK</span
        >
        <div slot="content" class="demo-overlay">
          United Kingdom
        </div>
      </lion-demo-overlay>
    `);

    return html`
      <style>
        ${overlayDemoStyle}
      </style>
      <div class="demo-box_placements">
        <p>In the beautiful ${popup} the weather is nice.</p>
      </div>
    `;
  })
  .add('On an input', () => {
    const popup = renderOffline(html`
      <lion-demo-overlay
        .config=${{
          placementMode: 'local',
          elementToFocusAfterHide: null,
          popperConfig: {
            placement: 'bottom',
          },
        }}
      >
        <div slot="content" class="demo-popup">United Kingdom</div>
        <input
          slot="invoker"
          id="input"
          type="text"
          autocomplete="off"
          @click=${e => e.stopImmediatePropagation()}
          @focusout=${() => {
            popup.opened = false;
          }}
          @focusin=${() => {
            popup.opened = true;
          }}
        />
      </lion-demo-overlay>
    `);

    return html`
      <style>
        ${overlayDemoStyle}
      </style>
      <div class="demo-box_placements">
        <label for="input">Input with a dropdown on focus</label>
        ${popup}
      </div>
    `;
  })
  .add('Sync application state', () => {
    const appState = {
      opened: true,
    };
    const openedStateNode = renderOffline(
      html`
        <span>${appState.opened}</span>
      `,
    );
    function onOpenClosed(ev) {
      appState.opened = ev.target.opened;
      openedStateNode.innerText = appState.opened;
    }
    const popup = renderOffline(html`
      <lion-demo-overlay .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
            class="close-button"
            @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
          >
            ⨯
          </button>
        </div>
      </lion-demo-overlay>
    `);

    return html`
      <style>
        ${overlayDemoStyle}
      </style>
      appState.opened: ${openedStateNode}
      <div class="demo-box_placements">
        ${popup}
      </div>
    `;
  })
  .add('Intercept open/close', () => {
    let shouldIntercept = true;
    let shouldInterceptButton;
    function toggleIntercept() {
      shouldIntercept = !shouldIntercept;
      shouldInterceptButton.textContent = shouldIntercept;
    }
    function intercept(ev) {
      if (shouldIntercept) {
        ev.preventDefault();
      }
    }
    shouldInterceptButton = renderOffline(
      html`
        <button @click="${toggleIntercept}">${shouldIntercept}</button>
      `,
    );

    const popup = renderOffline(html`
      <lion-demo-overlay @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
            class="close-button"
            @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
          >
            ⨯
          </button>
        </div>
      </lion-demo-overlay>
    `);

    return html`
      <style>
        ${overlayDemoStyle}
      </style>
      toggle shouldIntercept:${shouldInterceptButton}
      <div class="demo-box_placements">
        ${popup}
      </div>
    `;
  });

/* .add('Toggle placement with knobs', () => {
    const overlay = (placementMode = 'global') => html`
      <lion-demo-overlay
        .config=${{
          placementMode,
          ...(placementMode === 'global'
            ? { viewportConfig: { placement: text('global config', 'center') } }
            : { popperConfig: { placement: text('local config', 'top-start') } }),
        }}
      >
        <button slot="invoker">Overlay</button>
        <div slot="content" class="demo-overlay">
          Hello! You can close this notification here:
          <button
            class="close-button"
            @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
            >⨯</button
          >
        </div>
      </lion-demo-overlay>
    `;

    return html`
      <style>
        ${overlayDemoStyle}
      </style>
      <div class="demo-box_placements">
        <p>Local</p>
        ${overlay('local')}
      </div>

      <div class="demo-box_placements">
        <p>Global</p>
        ${overlay()}
      </div>
    `;
  }) */