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

export default {
  title: "Containers/Alert",
  component: Alert,
} as ComponentMeta<typeof Alert>;

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

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

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

export const AlertDetails = 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>,
};
