import * as React from "react";
import { action } from "@storybook/addon-actions";
import { withKnobs, text, boolean, select } from "@storybook/addon-knobs";

import {
  Container,
  Headline,
  SmartContainer,
  Button,
  Section,
} from "@sc/plugins/webcomponents/v2";
import {
  SmartConditionTypes,
  SmartConditionOperations,
  SmartConditionActions,
} from "./types";

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

export default {
  title: "Plugins|Web Components/Challenging/Smart Container",
  decorators: [withKnobs],
  component: SmartContainer,
};

export const Default: React.FC = () => {
  const Container01: React.FC = () => <div>This is the FIRST container</div>;
  const Container02: React.FC = () => <div>This is the SECOND container</div>;
  const Container03: React.FC = () => <div>This is the THIRD container</div>;

  return (
    <Section
      style={{
        padding: 40,
      }}
    >
      <SmartContainer
        conditions={[
          {
            type: SmartConditionTypes.DATE,
            condition: SmartConditionOperations.ISAFTER,
            action: SmartConditionActions.SWITCHCONTAINER,
            id: "CONTAINER01",
            value: Date.now() + 10 * 1000,
          },
          {
            type: SmartConditionTypes.DATE,
            condition: SmartConditionOperations.ISAFTER,
            action: SmartConditionActions.SWITCHCONTAINER,
            id: "CONTAINER02",
            value: Date.now() - 10 * 1000,
          },
          {
            type: SmartConditionTypes.DATE,
            condition: SmartConditionOperations.ISAFTER,
            action: SmartConditionActions.SWITCHCONTAINER,
            id: "CONTAINER03",
            value: Date.now() - 5 * 1000,
          },
        ]}
        containers={[
          {
            id: "CONTAINER01",
            container: Container01,
            default: false,
          },
          {
            id: "CONTAINER02",
            container: Container02,
            default: false,
          },
          {
            id: "CONTAINER03",
            container: Container03,
            default: true,
          },
        ]}
      />
    </Section>
  );
};

export const InTheEditor: React.FC = () => {
  return (
    <EditorWithCustomData
      content={[
        { id: "CustomField", parent: "u5j1r64m5rf", ...settings.default },
        ...sampleContentData,
      ]}
    />
  );
};