import * as React from "react";
import {
  Repeater,
  Container,
  Text,
  Headline,
} from "@sc/plugins/webcomponents/v2";
// import { themeSettings } from "@sc/plugins/webcomponents/v2/theme";

import settings from "./settings";
import {
  sampleContentData,
  EditorWithCustomData,
} from "@sc/modules/page/Builder/Builder.stories";

export default {
  title: "Plugins|Web Components/Challenging/Repeater",
  component: Repeater,
};

export const Default: React.FC = () => {
  return (
    <Repeater
      data={[
        {
          title: "Title 01",
          text:
            "Assumenda sed quidem quae tempora praesentium qui. Harum quia quis temporibus ratione ut omnis tempore ab. Eum impedit aliquid autem quia tempora. Nobis error perspiciatis dicta molestias.",
        },
        {
          title: "Title 02",
          text:
            "Non inventore rerum aut quo quasi accusantium velit. Possimus qui eveniet commodi. Eaque possimus et exercitationem qui unde. Neque ipsa nostrum asperiores et accusantium est alias.",
        },
        {
          title: "Title 03",
          text:
            "Fuga occaecati qui natus qui maiores. Laudantium sit debitis doloremque odit fugiat consequatur consequatur autem. Veritatis aspernatur nostrum consequuntur.",
        },
      ]}
    >
      {(data: any) => (
        <Container
          style={{
            padding: 20,
            margin: 20,
            border: "1px solid #CCC",
            background: "#EEE",
          }}
        >
          <Headline>{data.title}</Headline>
          <Text>{data.text}</Text>
        </Container>
      )}
    </Repeater>
  );
};
export const InTheEditor: React.FC = () => {
  return (
    <EditorWithCustomData
      content={[
        { id: "CustomField", parent: "u5j1r64m5rf", ...settings.default },
        ...sampleContentData,
      ]}
    />
  );
};