/**
 * TEAM: frontend_infra
 *
 * @flow
 */

import * as React from "react";

import {withKnobs, select, text} from "@storybook/addon-knobs";
import sections from "./sections";
import Toaster from "../toast/Toaster";
import useToaster from "../toast/useToaster";
import Toast, {type ToastProps} from "../toast/Toast";
import Group from "../Group";
import Button from "../button/Button";

const intents = ["none", "success", "danger"];

function ExampleToastLauncher({intent, message}: ToastProps) {
  const {showToast} = useToaster();

  return (
    <Button
      onClick={() => {
        /* Display Toasts from anywhere using 'showToast' */
        showToast({intent, message});
      }}
      width="full"
    >
      Launch toast
    </Button>
  );
}

const knobs = () => ({
  intent: select("Intent", intents, intents[0]),
  message: text("Message", "FLEX 124263 has been created"),
});

export default {
  title: `${sections.toast}`,
  decorators: [withKnobs],
};

export const Toasts = (): React.Element<"div"> => {
  const {intent, message} = knobs();

  return (
    <div>
      {/* Place a Toaster in the top level of your app */}
      <Toaster>
        <Group flexDirection="column" gap={12}>
          <Toast intent={intent} message={message} />
          <ExampleToastLauncher intent={intent} message={message} />
        </Group>
      </Toaster>
    </div>
  );
};