/* eslint-disable react/prop-types */
import 'twin.macro';

import { useArgs } from '@storybook/client-api';
import React from 'react';

import Button from '~/inputs/Button';
import Overlay from '~/layout/Overlay';

export default {
  title: 'Layout/Overlay',
  component: Overlay,
  args: {
    isOpen: false,
    offsetTop: 40,
  },
  argTypes: {
    isOpen: {
      control: {
        type: 'boolean',
      },
    },
    offsetTop: {
      control: {
        type: 'number',
      },
    },
  },
};

export function Default(props) {
  const [_, updateArgs] = useArgs();
  const onOpen = () => updateArgs({ ...props, isOpen: true });
  const onClose = () => updateArgs({ ...props, isOpen: false });
  return (
    <>
      <p>Use the button below to toggle the overlay</p>
      <p>The overlay will cover the entirety of the screen</p>
      <Button onClick={onOpen} variant="primary">
        Open Overlay
      </Button>
      <Overlay
        {...props}
        offsetTop={props.offsetTop}
        onClose={onClose}
        tw="h-screen bg-black text-white p-4"
        isOpen={props.isOpen}
        anchor="right"
      >
        <h1>Overlay Content</h1>
        <p>Click the button to dismiss the overlay</p>
        <Button onClick={onClose}>Close</Button>
      </Overlay>
    </>
  );
}