import * as React from "react";
import { StoryFn, Meta } from "@storybook/react";
import { MessagePanel, MessagePanelWrapper } from "..";
import { PrimaryButton, SecondaryButton } from "../../button";
import { PageHeader } from "../../pageheader";

export default {
  title: "Feedback/MessagePanel",
  component: MessagePanel,
  argTypes: {
    primaryAction: {
      control: { disable: true }
    },
    secondaryAction: {
      control: { disable: true }
    }
  },
  args: {
    appearance: "standard",
    heading: "No Policy Set"
  }
} as Meta;

const Template: StoryFn = args => (
  <MessagePanel heading="No Policy Set" {...args}>
    Define policy to start allowing groups and roles access to your clusters.
  </MessagePanel>
);

export const Default = {
  render: Template
};

export const WithMessagePanelWrapper = {
  render: args => (
    <>
      <PageHeader breadcrumbElements={[<div key="roles">Roles</div>]} />
      <MessagePanelWrapper>
        <MessagePanel heading="No policy set" {...args}>
          Define policy to start allowing groups and roles access to your
          clusters.
        </MessagePanel>
      </MessagePanelWrapper>
    </>
  )
};

export const WithActions = {
  render: Template,

  args: {
    primaryAction: <PrimaryButton>Create Role</PrimaryButton>,
    secondaryAction: <SecondaryButton>Learn More</SecondaryButton>
  }
};