import * as React from "react";
import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
import FacebookComments from "./live";
import { EditorFacebookComments } from "./component";

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

export default {
  title: "Plugins|Web Components/Simple/Facebook Comments",
  decorators: [withKnobs],
  component: FacebookComments,
  subcomponents: { EditorFacebookComments },
};

export const Default: React.FC = () => (
  <FacebookComments appId="Their App Id" href="http://tenminutepages.com" />
);

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