import * as React from "react";
import FormField from "./component";
// 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/Medium/Form Field",
  component: FormField,
};

const style = {
  FORM_FIELD: {
    style: {
      padding: 10,
      maxWidth: "100%",
      paddingRight: 40,
    },
    inputStyle: {
      width: "100%",
      backgroundColor: "#EEE",
      padding: 15,
      borderRadius: 20,
      border: "none",
    },
    labelStyle: {
      fontFamily: "Roboto",
      fontSize: "10pt",
      textAlign: "left",
      padding: 5,
    },
  },
};

export const Default: React.FC = () => (
  <FormField
    type="Text"
    name="email"
    placeholder="Enter Your Email"
    style={style.FORM_FIELD.style}
    inputStyle={style.FORM_FIELD.inputStyle}
  />
);
export const InTheEditor: React.FC = () => {
  return (
    <EditorWithCustomData
      content={[
        { id: "CustomField", parent: "u5j1r64m5rf", ...settings.default },
        ...sampleContentData,
      ]}
    />
  );
};