import React from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { primaryFont, grayBase } from "../ui-components/constants";
import { RooAlert } from "../ui-components/RooAlert";
import { RooAlertInfo } from "../ui-components/RooAlert/RooAlertInfo";

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

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

const textStyle = {
  fontFamily: primaryFont,
  fontWeight: 500,
  fontSize: "16px",
  color: grayBase,
  marginLeft: "18px",
};

const InfoTemplate: ComponentStory<typeof RooAlert> = () => (
  <>
    <RooAlertInfo />
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        gap: "8px",
        marginTop: "16px",
      }}
    >
      <RooAlert
        actionButtonProps={{ title: "Action" }}
        alertBody={<div style={textStyle}>Standard Alert</div>}
      />
      <RooAlert
        alertStatus="warning"
        actionButtonProps={{ title: "Action" }}
        alertBody={<div style={textStyle}>Warning Alert</div>}
      />
      <RooAlert
        alertStatus="error"
        actionButtonProps={{ title: "Action" }}
        alertBody={<div style={textStyle}>Error Alert</div>}
      />
    </div>
  </>
);

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

export const StandardAlert = Template.bind({});
StandardAlert.args = {
  actionButtonProps: { title: "Action" },
  alertBody: <div style={textStyle}>Alert copy goes here</div>,
};

export const WarningAlert = Template.bind({});
WarningAlert.args = {
  alertStatus: "warning",
  actionButtonProps: { title: "Action" },
  alertBody: <div style={textStyle}>Alert copy goes here</div>,
};

export const ErrorAlert = Template.bind({});
ErrorAlert.args = {
  alertStatus: "error",
  actionButtonProps: { title: "Action" },
  alertBody: <div style={textStyle}>Alert copy goes here</div>,
};
