/* eslint-disable react-hooks/rules-of-hooks */
import { useState } from '@storybook/addons';
import { select } from '@storybook/addon-knobs';
import * as React from 'react';
import Modal from '.';
import { ButtonGroup, Stack } from '../Layout/index';
import Button from '../Button';
import { Text } from '../Text';

export default {
  title: 'Components|Modal',
  component: Modal,
};

const RecursiveModal = ({ open, toggle, index = 1 }) => {
  const intent = React.useState(
    ['info', 'danger', 'positive', 'neutral'][Math.floor(Math.random() * 4)],
  )[0];
  const [childOpen, setChildOpen] = React.useState(false);
  return (
    <Modal
      size={select('size', ['small', 'medium', 'large', 'full'], 'medium')}
      open={open}
      toggle={toggle}
      titleDivider
      title={`Modal #${index}`}
    >
      <Modal.Body>
        <Stack>
          <Text>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit beatae qui animi
            laboriosam? Mollitia nihil molestias sequi ipsum ullam, doloribus ex, nam corrupti quasi
            architecto excepturi. Facilis at harum esse.
          </Text>
          <ButtonGroup>
            <Button onClick={() => setChildOpen(true)}>Open another modal</Button>
          </ButtonGroup>
          <RecursiveModal open={childOpen} toggle={setChildOpen} index={index + 1} />
        </Stack>
      </Modal.Body>
      <Modal.Footer>
        <ButtonGroup>
          <Button appearance="secondary" onClick={() => toggle(false)}>
            Close
          </Button>
          <Button intent={intent} onClick={() => toggle(false)}>
            Also close
          </Button>
        </ButtonGroup>
      </Modal.Footer>
    </Modal>
  );
};

export const index = () => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Open modal</Button>
      <RecursiveModal open={open} toggle={setOpen} />
    </>
  );
};

export const uncloseable = () => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Open modal</Button>
      <Modal disableClose open={open} toggle={setOpen} title="Unclosable modal">
        <Modal.Body>
          <Text>This modal can only be closed with the button below.</Text>
        </Modal.Body>

        <Modal.Footer>
          <Button appearance="secondary" onClick={() => setOpen(false)}>
            Close
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};