import * as React from "react";
import Container from "./live";
import { EditorContainer } from "./component";
import { ComponentTypes } from "../types";
import settings from "./settings";

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

export default {
  title: "Plugins|Web Components/Exists/Container",
  component: Container,
  subcomponents: { EditorContainer },
};

export const Default: React.FC = () => (
  <Container style={{ padding: 40, border: "10px solid red" }}>
    <span>Container</span>
  </Container>
);

export const InTheEditor: React.FC = () => {
  return (
    <EditorWithCustomData
      content={[
        {
          // id: "CustomField",
          type: ComponentTypes.CONTAINER,
          id: "u5j1r64m5rf",
          parent: 2540,
          ...settings.default,
          properties: {
            ...settings.default.properties,
            // backgroundColor: "lightyellow",
            backgroundColor: "#333",
            border: "10px solid red",
            padding: 100,
            margin: 100,
            maxWidth: "100%",
          },
        },
        ...sampleContentData.filter((itm) => itm.id !== "u5j1r64m5rf"),
      ]}
    />
  );
};