import React from 'react';
import { StoryObj, Meta } from '@storybook/react';
import { closeAllContentTogglesInToolbar, contentToggleEdgeHandling, findToolbar, lockBodyScroll, unlockBodyScroll } from '@aarhus-university/au-designsystem-delphinus/source/js/components/toolbar';
import AUToolbarComponent from '../src/components/AUToolbarComponent';
import AUButtonComponent from '../src/components/AUButtonComponent';
import AUContentToggleComponent from '../src/components/AUContentToggleComponent';
import { ThemeWrapper } from './lib/helpers';
import { isElementWithClassNameInEventPath } from '@aarhus-university/au-designsystem-delphinus/source/js/components/helpers';

export default {
  title: 'Delphinus/Toolbar',
  component: AUToolbarComponent,
  argTypes: {
    lang: {
      table: {
        disable: true,
      }
    },
    elements: {
      table: {
        disable: true,
      }
    },
    onCloseContentToggles: {
      table: {
        disable: true,
      }
    },
    buttonElements: {
      table: {
        disable: true,
      }
    },
    buttonClass: {
      table: {
        disable: true,
      }
    },
    title: {
      table: {
        disable: true,
      }
    },
    center: {
      table: {
        disable: true,
      }
    },
    noCollapse: {
      table: {
        disable: true,
      }
    },
  },
  decorators: [
    (Story, context) => (
      <ThemeWrapper theme={context.globals.theme}>
        {Story()}
      </ThemeWrapper>
    )
  ],
} as Meta<typeof AUToolbarComponent>;

type Story = StoryObj<typeof AUToolbarComponent>;

export const Form_Field_and_Buttons_and_Link: Story = {
  args: {
    lang: 'da',
    elements: [
      <form className="form">
        <div className="form__inline-submit">
          <div className="form__field form__field--inline-label">
            <label htmlFor="demo-search">Search</label>
            <input type="search" autoComplete="off" autoCorrect="off" autoCapitalize="off" id="demo-search" />
          </div>
          <input className="form__inline-submit__button" type="submit" value="Submit" />
        </div>
      </form>,
      <AUButtonComponent icon="confirm-circle" label="Mark as read" />,
      <AUButtonComponent icon="delete" hideLabel label="Delete" />,
      <AUButtonComponent type="text" label="Select all" />,
      <div className="toolbar__split" />,
      <div className="toolbar__text-item">
        <a className="a--text-link" href="#">Open in new tab</a>
      </div>,
    ],
  },
  render: (args) => (
    <>
      <AUToolbarComponent {...args} />
      <div className="box theme--background-secondary">
        <p>Content goes here...</p>
      </div>
    </>
  ),
};

export const Many_Actions: Story = {
  args: {
    lang: 'da',
    elements: Array(25).fill(null).map((_, i) => <AUButtonComponent label={`Action ${i + 1}`} />),
  },
  render: (args) => (
    <>
      <AUToolbarComponent {...args} />
      <div className="box theme--background-secondary">
        <p>Content goes here...</p>
      </div>
    </>
  ),
};

export const Groupings: Story = {
  args: {
    lang: 'da',
    elements: [
      <div className="toolbar__group">
        <div className="form__field form__field--horizontal">
          <label htmlFor="demo-all">All issues</label>
          <input type="radio" name="demo" value="all" id="demo-all" defaultChecked />
        </div>
        <div className="form__field form__field--horizontal">
          <label htmlFor="demo-open">Open</label>
          <input type="radio" name="demo" value="all" id="demo-open" />
        </div>
        <div className="form__field form__field--horizontal">
          <label htmlFor="demo-resolved">Resolved</label>
          <input type="radio" name="demo" value="all" id="demo-resolved" />
        </div>
      </div>,
      <div className="toolbar__split" />,
      <div className="toolbar__group">
        <div className="form__field form__field--horizontal">
          <label htmlFor="demo-epics">Epics</label>
          <input type="checkbox" id="demo-epics" defaultChecked />
        </div>
        <div className="form__field form__field--horizontal">
          <label htmlFor="demo-stories">Stories</label>
          <input type="checkbox" id="demo-stories" defaultChecked />
        </div>
        <div className="form__field form__field--horizontal">
          <label htmlFor="demo-tasks">Tasks</label>
          <input type="checkbox" id="demo-tasks" defaultChecked />
        </div>
      </div>,
    ],
  },
  render: (args) => (
    <>
      <AUToolbarComponent {...args} />
      <div className="box theme--background-secondary">
        <p>Content goes here...</p>
      </div>
    </>
  ),
};

export const Filter: Story = {
  args: {
    lang: 'da',
    elements: [
      <AUContentToggleComponent
        toggled={false}
        onClick={(popout: HTMLElement) => {
          contentToggleEdgeHandling(popout);
          lockBodyScroll();
        }}
        beforeCallback={(content: HTMLElement) => closeAllContentTogglesInToolbar(findToolbar(content))}
        afterCallback={(content: HTMLElement, button: HTMLButtonElement) => {
          const ariaExpanded = button.getAttribute('aria-expanded');
          const toolbar = findToolbar(content);
          if (ariaExpanded === 'true') {
            toolbar?.classList.add('toolbar--has-popout');
          } else {
            toolbar?.classList.remove('toolbar--has-popout');
          }
  
          content.addEventListener('click', (event: MouseEvent) => {
            if ((event.target as HTMLElement).classList.contains('toolbar__popout')
              && !isElementWithClassNameInEventPath(event as MouseEvent, 'toolbar__filter__content')) {
              closeAllContentTogglesInToolbar(toolbar);
              unlockBodyScroll();
            }
          });
        }}
      >
        <div className="toolbar__filter">
          <button
            type="button"
            className="toolbar__filter__toggle content-toggle__toggle"
            aria-expanded={false}
            aria-label="Filter 1"
          >
            Filter 1
          </button>
          <div
            className="toolbar__popout content-toggle__content"
            hidden
          >
            <div className="toolbar__filter__content toolbar__popout__content theme--normal">
              <h3 className="toolbar__filter__content__title">
                Vælg Filter 1
              </h3>
  
              <form className="form toolbar__filter__content__search">
                <div className="form__inline-submit">
                  <div className="form__field form__field--inline-label">
                    <label htmlFor="search-filter-1">
                      Søg
                    </label>
                    <input
                      type="search"
                      id="search-filter-1"
                    />
                  </div>
                  <input className="form__inline-submit__button" type="submit" value="Søg" />
                </div>
              </form>
              <form
                className="toolbar__filter__content__options-and-actions"
                onSubmit={(event) => {
                  event.preventDefault();
                  unlockBodyScroll();
                }}
              >
                <div
                  className="toolbar__filter__content__options"
                >
                  <div className="toolbar__filter__content__options__scroll-container">
                    <fieldset className="selection-list">
                      <legend>
                        5 valgmuligheder
                      </legend>
                      <div className="selection-list__option">
                        <input type="checkbox" id="option-1" />
                        <label htmlFor="option-1">Valgmulighed 1</label>
                      </div>
                      <div className="selection-list__option">
                        <input type="checkbox" id="option-2" />
                        <label htmlFor="option-2">Valgmulighed 2</label>
                      </div>
                      <div className="selection-list__option">
                        <input type="checkbox" id="option-3" />
                        <label htmlFor="option-3">Valgmulighed 3</label>
                      </div>
                      <div className="selection-list__option">
                        <input type="checkbox" id="option-4" />
                        <label htmlFor="option-4">Valgmulighed 4</label>
                      </div>
                      <div className="selection-list__option">
                        <input type="checkbox" id="option-5" />
                        <label htmlFor="option-5">Valgmulighed 5</label>
                      </div>
                    </fieldset>
                  </div>
                </div>
                <div className="toolbar__filter__content__actions">
                  <div className="button-container">
                    <input type="submit" className="content-toggle__close button button--small" value="Gem" />
                  </div>
                </div>
              </form>
            </div>
            <button
              type="button"
              className="toolbar__popout__close content-toggle__close button button--icon button--icon--hide-label icon-close"
              onClick={() => unlockBodyScroll()}
            >
              Luk
            </button>
          </div>
        </div>
      </AUContentToggleComponent>,
      <AUContentToggleComponent
        toggled={false}
        onClick={(popout: HTMLElement) => {
          contentToggleEdgeHandling(popout);
          lockBodyScroll();
        }}
        beforeCallback={(content: HTMLElement) => closeAllContentTogglesInToolbar(findToolbar(content))}
        afterCallback={(content: HTMLElement, button: HTMLButtonElement) => {
          const ariaExpanded = button.getAttribute('aria-expanded');
          const toolbar = findToolbar(content);
          if (ariaExpanded === 'true') {
            toolbar?.classList.add('toolbar--has-popout');
          } else {
            toolbar?.classList.remove('toolbar--has-popout');
          }
  
          content.addEventListener('click', (event: MouseEvent) => {
            if ((event.target as HTMLElement).classList.contains('toolbar__popout')
              && !isElementWithClassNameInEventPath(event as MouseEvent, 'toolbar__filter__content')) {
              closeAllContentTogglesInToolbar(toolbar);
              unlockBodyScroll();
            }
          });
        }}
      >
        <div className="toolbar__filter">
          <button
            type="button"
            className="toolbar__filter__toggle content-toggle__toggle"
            aria-expanded={false}
            aria-label="Filter 1"
          >
            Filter 2
          </button>
          <div
            className="toolbar__popout content-toggle__content"
            hidden
          >
            <div className="toolbar__filter__content toolbar__popout__content theme--normal">
              <h3 className="toolbar__filter__content__title">
                Vælg Filter 2
              </h3>
  
              <form className="form toolbar__filter__content__search">
                <div className="form__inline-submit">
                  <div className="form__field form__field--inline-label">
                    <label htmlFor="search-filter-2">
                      Søg
                    </label>
                    <input
                      type="search"
                      id="search-filter-2"
                    />
                  </div>
                  <input className="form__inline-submit__button" type="submit" value="Søg" />
                </div>
              </form>
              <form
                className="toolbar__filter__content__options-and-actions"
                onSubmit={(event) => {
                  event.preventDefault();
                  unlockBodyScroll();
                }}
              >
                <div
                  className="toolbar__filter__content__options"
                >
                  <div className="toolbar__filter__content__options__scroll-container">
                    <fieldset className="selection-list">
                      <legend>
                        3 valgmuligheder
                      </legend>
                      <div className="selection-list__option">
                        <input type="checkbox" id="option-10" />
                        <label htmlFor="option-10">Valgmulighed 1</label>
                      </div>
                      <div className="selection-list__option">
                        <input type="checkbox" id="option-20" />
                        <label htmlFor="option-20">Valgmulighed 2</label>
                      </div>
                      <div className="selection-list__option">
                        <input type="checkbox" id="option-30" />
                        <label htmlFor="option-30">Valgmulighed 3</label>
                      </div>
                    </fieldset>
                  </div>
                </div>
                <div className="toolbar__filter__content__actions">
                  <div className="button-container">
                    <input type="submit" className="content-toggle__close button button--small" value="Gem" />
                  </div>
                </div>
              </form>
            </div>
            <button
              type="button"
              className="toolbar__popout__close content-toggle__close button button--icon button--icon--hide-label icon-close"
              onClick={() => unlockBodyScroll()}
            >
              Luk
            </button>
          </div>
        </div>
      </AUContentToggleComponent>
    ],
    onCloseContentToggles: () => console.log('luuuuuk?'),
  },
  render: (args) => (
    <>
      <AUToolbarComponent {...args} />
      <div className="box theme--background-secondary">
        <p>Content goes here...</p>
      </div>
    </>
  ),
};