import * as React from "react";
import {
  Switch,
  Container,
  Button,
  FormBuilder,
} from "@sc/plugins/webcomponents/v2";

import { ComponentTypes } from "../types";
import { FormFieldTypes } from "@sc/modules/v2/CRUD/FormBuilder/types";
import theme from "@sc/plugins/misc/v2/blocks/weblayouts/theme";

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

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

const style = {
  CONTAINER: {
    // margin: "0 auto",
    padding: 50,
  },
  BUTTON: {
    style: {
      padding: 15,
      border: "none",
      background: theme.backgroundColor,
      width: "100%",
      borderRadius: 3,
      cursor: "pointer",
    },
    caption1: {
      color: theme.foregroundColor,
      fontWeight: "bold" as "bold",
      fontSize: "10pt",
    },
  },
};

export const Default = () => {
  const Container1 = () => (
    <Container style={style.CONTAINER}>
      <br style={{ clear: "both" }} />
      First Container
    </Container>
  );

  const Container2 = () => (
    <Container style={style.CONTAINER}>
      <br style={{ clear: "both" }} />
      Second Container
    </Container>
  );

  return (
    <Switch
      style={{ width: 500, height: 300 }}
      globalStyle={{ color: "purple" }}
      actionItems={(switchContainer: any) => [
        {
          type: ComponentTypes.BUTTON,
          style: {
            ...style.BUTTON.style,
            width: 200,
            float: "left",
            margin: 10,
            display: "inline-block",
          },
          caption1: "Action 1",
          caption1style: style.BUTTON.caption1,
          onClick: () => switchContainer(1),
        },
        {
          type: ComponentTypes.BUTTON,
          style: {
            ...style.BUTTON.style,
            width: 200,
            float: "left",
            margin: 10,
            display: "inline-block",
          },
          caption1: "Action 2",
          caption1style: style.BUTTON.caption1,
          onClick: () => switchContainer(2),
        },
      ]}
      containerItems={[
        {
          id: 1,
          style: {
            color: "green",
            fontSize: "36pt",
            border: "5px solid green",
          },
          children: Container1,
        },
        {
          id: 2,
          style: { color: "red", fontSize: "36pt", border: "5px solid red" },
          children: Container2,
        },
      ]}
    />
  );
};
export const InTheEditor: React.FC = () => {
  return (
    <EditorWithCustomData
      content={[
        { id: "CustomField", parent: "u5j1r64m5rf", ...settings.default },
        ...sampleContentData,
      ]}
    />
  );
};