import React, { useState } from 'react';
import Modal from './modal';

export default {
  title: 'common/Modal',
  component: Modal,
  args: {
    darkMode: false,
    showModal: true,
    // eslint-disable-next-line no-console
    onClose: () => console.log('closing'),
    width: 'medium',
    ariaLabel: 'Test modal',
  },
};

export const modalWithFocusableElements = args => {
  return (
    <>
      <Modal {...args}>
        <h1>Modal Title</h1>
        <p>There are some elements you can focus on in here.</p>
        <p>Focus should remain within the modal.</p>
        <input />
        <button onClick={args.onClose()} type='button'>
          Close
        </button>
      </Modal>
      <div>
        <a href='#'>
          You should not be able to tab into me when modal is open.
        </a>
      </div>
    </>
  );
};

export const modalWithoutFocusableElements = args => {
  return (
    <>
      <Modal {...args}>
        <h1>Modal Title</h1>
        <p>No elements to focus on in here.</p>
        <p>Focus should remain on the dialog element.</p>
      </Modal>
      <div>
        <a href='#'>
          You should not be able to tab into me when modal is open.
        </a>
      </div>
    </>
  );
};

export const modalImplementation = () => {
  const [showModal, setShowModal] = useState(false);

  const onClose = () => setShowModal(false);

  return (
    <>
      <p>This component showcases how the Modal can be implemented in code. </p>
      <button
        onClick={() => {
          setShowModal(true);
        }}
        type='button'
      >
        Click me
      </button>
      <Modal
        onClose={onClose}
        showModal={showModal}
        width='medium'
        darkMode={false}
        ariaLabel='Test Modal'
      >
        <h1>Modal Title</h1>
        <input />
        <button onClick={() => setShowModal(false)} type='button'>
          Close
        </button>
      </Modal>
      <div>
        <a href='#'>
          You should not be able to tab into me when modal is open.
        </a>
      </div>
    </>
  );
};

modalWithFocusableElements.parameters = {
  docs: {
    inlineStories: false,
  },
};

modalWithoutFocusableElements.parameters = {
  docs: {
    inlineStories: false,
  },
};

modalImplementation.parameters = {
  docs: {
    inlineStories: false,
  },
  controls: { disabled: true },
};
