import React, { useState } from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";

import { RooModal } from "../ui-components/RooModal";
import { ModalInfo } from "../ui-components/RooModal/ModalInfo";

export default {
  title: "RooModal",
  component: RooModal,
} as ComponentMeta<typeof RooModal>;

const Template: ComponentStory<typeof RooModal> = (args) => {
  const [isShowModal, setShowModal] = useState(true);

  return (
    <RooModal
      {...args}
      showModal={isShowModal}
      onCloseModal={() => setShowModal(false)}
    />
  );
};

const InfoTemplate: ComponentStory<typeof RooModal> = () => <ModalInfo />;

export const ModalDetails = InfoTemplate.bind({});

export const SmallModal = Template.bind({});
SmallModal.args = {
  size: "s",
  modalTitle: "Modal Title",
  primaryButtonProps: { title: "Submit" },
  secondaryButtonProps: { title: "Cancel" },
  modalBody: (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <div>Example Modal Info</div>
      <div>Example Modal Info</div>
      <div>Example Modal Info</div>
      <div>Example Modal Info</div>
      <div>Example Modal Info</div>
      <div>Example Modal Info</div>
    </div>
  ),
};
export const MediumModal = Template.bind({});
MediumModal.args = {
  size: "m",
  modalTitle: "Modal Title",
  primaryButtonProps: { title: "Submit" },
  secondaryButtonProps: { title: "Cancel" },
  modalBody: (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <div>Example Modal Info</div>
      <div>Example Modal Info</div>
      <div>Example Modal Info</div>
      <div>Example Modal Info</div>
      <div>Example Modal Info</div>
      <div>Example Modal Info</div>
    </div>
  ),
};
export const LargeModal = Template.bind({});
LargeModal.args = {
  size: "l",
  modalTitle: "Modal Title",
  primaryButtonProps: { title: "Submit" },
  secondaryButtonProps: { title: "Cancel" },
  modalBody: (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <div>Example Modal Info</div>
      <div>Example Modal Info</div>
      <div>Example Modal Info</div>
      <div>Example Modal Info</div>
      <div>Example Modal Info</div>
      <div>Example Modal Info</div>
    </div>
  ),
};

export const ModalNoButtons = Template.bind({});
ModalNoButtons.args = {
  size: "m",
  modalTitle: "Modal Title",
  modalBody: (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <div>Example Modal Info</div>
      <div>Example Modal Info</div>
      <div>Example Modal Info</div>
      <div>Example Modal Info</div>
      <div>Example Modal Info</div>
      <div>Example Modal Info</div>
    </div>
  ),
};
