import React, { useState } from "react";
import { Meta, Story } from "@storybook/react";
import {
  OrganismAlertMessage,
  IAlertMessageProps,
} from "react/organisms/AlertMessage";
import { AtomButtonDefault } from "react/atoms/Buttons/Default";
import { theme } from "data/dataMx";

const meta: Meta = {
  title: "React/organisms",
  component: OrganismAlertMessage,
  argTypes: {
    type: {
      control: {
        type: "radio",
        options: ["success", "error", "info", "custom"],
      },
    },
    customColor: {
      control: {
        type: "select",
      },
      options: Object.keys(theme),
    },
  },
  parameters: {
    controls: { expanded: true },
    actions: {
      handles: ["click"],
    },
  },
};

export default meta;

const TemplateAlertMessage: Story<IAlertMessageProps> = (props) => {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  return (
    <>
      <AtomButtonDefault
        type="button"
        disabled={false}
        text="Open Alert"
        color="primary"
        onClick={() => setIsOpen(true)}
      />
      {isOpen && (
        <OrganismAlertMessage
          {...props}
          onClickFirstBtn={() => setIsOpen(false)}
          onClickSecondBtn={() => setIsOpen(false)}
        />
      )}
    </>
  );
};

export const AlertMessage = TemplateAlertMessage.bind({});

AlertMessage.args = {
  type: "success",
  title: `This is 
  sample message for info modals`,
  message:
    "Lorem ipsum dolors sit amet proin gravid electum sum prompectum delect.",
  textFirstBtn: "Yes, leave quiz",
  textSecondBtn: "Cancel",
};
