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

import { RooToast } from "../ui-components/RooToast";
import { RooToastInfo } from "../ui-components/RooToast/RooToastInfo";

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

const InfoTemplate: ComponentStory<typeof RooToast> = (args) => (
  <>
    <RooToastInfo />
    <div style={{ position: "absolute", right: 0, marginTop: "100px" }}>
      <RooToast
        style={{ position: "relative" }}
        {...{
          variant: "success",
          message: "Roo-hoo!",
          description: "Shift request was successfully confirmed.",
          color: "#E6F2EE",
          borderColor: "#007A4C",
          remainsOnPage: true,
        }}
      ></RooToast>
      <br />
      <RooToast
        style={{ position: "relative" }}
        {...{
          variant: "warning",
          message: "Uh-oh, something went wrong",
          description: "The form could not be submitted right now.",
          color: "#FDF9E9",
          borderColor: "#E7C21C",
          remainsOnPage: true,
        }}
      ></RooToast>
      <br />
      <RooToast
        style={{ position: "relative" }}
        {...{
          variant: "error",
          message: "Error",
          description: "The form could not be submitted right now.",
          color: "#FDE8E8",
          borderColor: "#E81616",
          remainsOnPage: true,
        }}
      ></RooToast>
      <br />
      <RooToast
        style={{ position: "relative" }}
        {...{
          message: "Did you know?",
          description: "Check out Roo4You for more information.",
          remainsOnPage: true,
        }}
      ></RooToast>
      <br />
    </div>
  </>
);

const Template: ComponentStory<typeof RooToast> = (args) => (
  <RooToast {...args}></RooToast>
);

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

export const Success = Template.bind({});
Success.args = {
  variant: "success",
  message: "Roo-hoo!",
  description: "Shift request was successfully confirmed.",
  color: "#E6F2EE",
  borderColor: "#007A4C",
};

export const Warning = Template.bind({});
Warning.args = {
  variant: "warning",
  message: "Uh-oh, something went wrong",
  description: "The form could not be submitted right now.",
  color: "#FDF9E9",
  borderColor: "#E7C21C",
};

export const Error = Template.bind({});
Error.args = {
  variant: "error",
  message: "Error",
  description: "The form could not be submitted right now.",
  color: "#FDE8E8",
  borderColor: "#E81616",
};

export const Info = Template.bind({});
Info.args = {
  message: "Did you know?",
  description: "Check out Roo4You for more information.",
};
