import { Meta, Canvas, ArgsTable, Story, SourceState } from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import {
  MarkdownDirectiveChipInfo,
  MarkdownDirectiveChipConveyor,
  MarkdownDirectiveChipFront,
  MarkdownDirectiveChipJira,
  MarkdownDirectiveChipSalesforce,
  MarkdownDirectiveChipServiceNow,
  MarkdownDirectiveChipSlack,
  MarkdownDirectiveChipZendesk,
} from "./directives";
import { Markdown } from "./Markdown";

<Meta title="Components/Data/Markdown" component={Markdown} />

<ComponentHeading
  componentName="Markdown"
  description="Renders markdown as html"
  sourcePath="src/components/Markdown/Markdown.tsx"
/>

## Installation

```jsx
import { Markdown } from "@conveyorhq/arrow-ds";
```

## Basic usage

<Canvas>
  <Story name="Markdown">
    {() => {
      const content = `
[Control: Third Party Access Review Control](/)
## Third Party Access Reviews Procedure
### Review Access Controls
**To be performed at the following times:**
* Whenever an ISMS Role Membership is added, updated, or deleted
* Whenever an Access Control Review is due (Every 7 months)
**In accordance with the following requirements:**
**1. Review Access Grants to Information Systems**
The Security Team shall ensure that a review of access grants to
information systems is completed.`;
      return <Markdown>{content}</Markdown>;
    }}
  </Story>
</Canvas>

## API

<ArgsTable of={Markdown} />

## Demos

### Plain text

Using the `renderPlainText` prop, you can strip out most typographic styles (links are left intact).

<Canvas withSource={SourceState.OPEN}>
  <Story name="Markdown plain">
    {() => {
      const content = `
[Control: Third Party Access Review Control](/)
## Third Party Access Reviews Procedure
### Review Access Controls
**To be performed at the following times:**
* Whenever an ISMS Role Membership is added, updated, or deleted
* Whenever an Access Control Review is due (Every 7 months)
**In accordance with the following requirements:**
**1. Review Access Grants to Information Systems**
The Security Team shall ensure that a review of access grants to
information systems is completed.
`;
      return <Markdown renderPlainText>{content}</Markdown>;
    }}
  </Story>
</Canvas>

### Passing in custom components

Previously referred to as `renderers`, this example shows how you can use the
`components` prop provided by react-markdown to render links to open in a new
window. Keep in mind that this will make all anchor links open in a new window.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Markdown components">
    {() => {
      const content = `
# Hello and welcome
Go to our website at [Conveyor.com](https://www.conveyor.com/). This link will
open in a **new window**. There you will find information about us
and our company.
`;
      return (
        <Markdown
          components={{
            a: (props) => (
              <a href={props.href} target="_blank" rel="noopener noreferrer">
                {props.children}
              </a>
            ),
          }}
        >
          {content}
        </Markdown>
      );
    }}
  </Story>
</Canvas>

### Passing in custom components along with rendering plain text

When the `renderPlainText` prop is set to true, the component sets some custom
components internally to strip out headings, emphasized and strong text. This
example demonstrates how both sets of renders are merged into one object and
then passed onto react-markdown. Plain text is renderered along with custom
anchor links.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Markdown components with renderPlainText">
    {() => {
      const content = `
# Hello and welcome to plain text
Go to our website at [Conveyor.com](https://www.conveyor.com/). This link will
open in a **new window**. There you will find information about us
and our company.
`;
      return (
        <Markdown
          renderPlainText
          components={{
            a: (props) => (
              <a href={props.href} target="_blank" rel="noopener noreferrer">
                {props.children}
              </a>
            ),
          }}
        >
          {content}
        </Markdown>
      );
    }}
  </Story>
</Canvas>

### Using directives

A directive is a special string within Markdown content that is converted into HTML.

An example directive looks like this:

```
:salesforce-chip[Salesforce Field]
```

Where `salesforce-chip` is the directive name and `Salesforce Field` is the directive value.

There are a number of built-in directives:

- `:info-chip`, renders a default Chip component <MarkdownDirectiveChipInfo>info-chip</MarkdownDirectiveChipInfo>
- `:conveyor-chip`, renders a default Chip component with a gray Conveyor logo <MarkdownDirectiveChipConveyor>conveyor-chip</MarkdownDirectiveChipConveyor>
- `:front-chip`, renders a Front Chip.Integration component <MarkdownDirectiveChipFront>front-chip</MarkdownDirectiveChipFront>
- `:jira-chip`, renders a Salesforce Chip.Integration component <MarkdownDirectiveChipJira>jira-chip</MarkdownDirectiveChipJira>
- `:servicenow-chip`, renders a Salesforce Chip.Integration component <MarkdownDirectiveChipServiceNow>servicenow-chip</MarkdownDirectiveChipServiceNow>
- `:salesforce-chip`, renders a Salesforce Chip.Integration component <MarkdownDirectiveChipSalesforce>salesforce-chip</MarkdownDirectiveChipSalesforce>
- `:slack-chip`, renders a Slack Chip.Integration component <MarkdownDirectiveChipSlack>slack-chip</MarkdownDirectiveChipSlack>
- `:zendesk-chip`, renders a Salesforce Chip.Integration component <MarkdownDirectiveChipZendesk>zendesk-chip</MarkdownDirectiveChipZendesk>

To define a directive, you need to pass a `directives` object to the `Markdown` component. The key is the directive
name and the value is a React component that will be rendered in place of the directive.

```
const directives = {
  "custom-highlight": (props) => <span style={{ background: 'yellow' }}>{props.children}</span>,
};
```

In the example below, there are three directives in use:

- `:info-chip`, built-in directive
- `:salesforce-chip`, built-in directive
- `:custom-highlight`, custom directive passed in via the `directives` prop

<Canvas>
  <Story name="Markdown directives">
    {() => {
      const directives = {
        "custom-highlight": (props) => (
          <span style={{ background: "yellow" }}>{props.children}</span>
        ),
      };
      const content = `
## Example content using directives
**To be performed at the following times:**
* Whenever an :info-chip[ISMS Role Membership] is added, updated, or deleted in :salesforce-chip[Salesforce => Field Name]
* Whenever an Access Control Review is due (Every 7 months)
**In accordance with the following requirements:**
**1. Review Access Grants to Information Systems**
The Security Team shall ensure that a review of access grants to
information systems is :custom-highlight[completed].`;
      return <Markdown directives={directives}>{content}</Markdown>;
    }}
  </Story>
</Canvas>