import React from 'react';

import RichText from '@/components/atoms/RichText';
import { RichTextProps } from '@/components/atoms/RichText/RichText';
import { Meta, Story } from '@storybook/react';

export default {
  title: "Components/RichText",
  component: RichText,
} as Meta;

const Template: Story<RichTextProps> = ({ ...args }) => (
  <RichText {...args}>
    {`<p>Example mixed content <strong>with bold text</strong> and <a href="https://example.com">linked content</a>.</p>`}
  </RichText>
);

// More on args: https://storybook.js.org/docs/react/writing-stories/args
export const Simple = Template.bind({});

const Template2: Story<RichTextProps> = ({ ...args }) => (
  <RichText {...args} tag="div">
    {`<h1>H1</h1>
        <h2>H2</h2>
        <h3>H3</h3>
        <h3>H3</h3>
        <h4>H4</h4>
        <h5>H5</h5>
        <h6>H6</h6>
        <p>Paragraph tag <strong>with</strong> <a href="https://example.com">linked content</a>.</p>
        <ul>
          <li>UL List item 1</li>
          <li>UL List item 2
            <ul>
              <li>UL List item 1</li>
              <li>UL List item 2</li>
              <li>UL List item 3</li>
            </ul>
          </li>
          <li>UL List item 3</li>
        </ul>
        <ol>
          <li>OL List item 1</li>
          <li>OL List item 2
            <ol>
              <li>OL List item 1</li>
              <li>OL List item 2</li>
              <li>OL List item 3</li>
            </ol>
          </li>
          <li>OL List item 3</li>
        </ol>`}
  </RichText>
);

export const OtherExample = Template2.bind({});

const Template3: Story<RichTextProps> = ({ ...args }) => (
  <RichText {...args} tag="h2">
    {`This heading has <strong>Bold Content</strong> and <i>Italics</i>`}
  </RichText>
);

export const HeadingTag = Template3.bind({});

const Template4: Story<RichTextProps> = ({ ...args }) => (
  <RichText
    {...args}
    tag="h2"
    attributes={{
      "data-att": true,
    }}
  >
    {`This heading with HTML attributes`}
  </RichText>
);

export const HTMLAttributes = Template4.bind({});

const Template5: Story<RichTextProps> = ({ ...args }) => (
  <RichText
    {...args}
    tag="h2"
    attributes={{
      "data-att": true,
    }}
  >
    {`<p>2 capacetes, da marca SPY, cor preto, tamanho L. NOTA: acresce IVA. Teste</p> <script> alert(\"danger\") </script>  `}
  </RichText>
);

export const PreventJSInjection = Template5.bind({});