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

import Section from "./live";
import { Container, Headline } from "@sc/plugins/webcomponents/v2";
import { themeSettings, styleData } from "@sc/plugins/webcomponents/v2/theme";

import { getClipPath, ClipPathTypes } from "@sc/plugins/utilities/clipPaths";

// import theme from "@sc/plugins/misc/v2/blocks/weblayouts/theme";
// import Shapes from "../Shapes";
// import { Shape, ShapeTypes } from "../Shapes/component";
// import { Image } from "..";

import { BODY } from "@sc/modules/v2/Editor/types";

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

export default {
  title: "Plugins|Web Components/Simple/Section",
  component: Section,
  decorators: [withKnobs],
};

// const bg = require("@sc/lsvt/src/images/background.png");

const style = {
  SECTION: {
    backgroundColor: themeSettings.default.primaryColor,
    // backgroundImage: `url(${bg})`,
    backgroundSize: "cover",
    // minHeight: "100vh"
  },
  HEADLINE: {
    fontFamily: "Poppins",
    padding: 25,
    fontSize: "42pt",
    fontWeight: "bold",
    color: themeSettings.default.lightTextColor,
    lineHeight: "60px",
  },
};

export const Default: React.FC = () => {
  return (
    <Section
      style={{
        ...style.SECTION,
        background: themeSettings.default.primaryColor,
        padding: 40,
        textAlign: "center",
      }}
    >
      <Container style={{ ...styleData.PAGE_MARGIN }}>
        <Headline style={style.HEADLINE}>This is a section</Headline>
      </Container>
    </Section>
  );
};

export const WithClipPaths: React.FC = () => (
  // <div style={{ backgroundColor: theme.backgroundColor }}>
  <div style={{ backgroundColor: "transparent" }}>
    <Section
      style={{
        ...style.SECTION,
        background: themeSettings.default.primaryColor,
        padding: 40,
        textAlign: "center",
        clipPath: getClipPath({
          type: select("Type", ClipPathTypes, ClipPathTypes.OCTAGON),
        }),
      }}
    >
      <Container style={{ ...styleData.PAGE_MARGIN }}>
        <Headline style={style.HEADLINE}>This is a section</Headline>
      </Container>
    </Section>
  </div>
);

export const InTheEditor: React.FC = () => {
  const containerId = "u5j1r64m5rf";
  return (
    <EditorWithCustomData
      defaultMobileState={{
        type: "desktop",
        dimensions: {
          maxWidth: 1000,
          minHeight: "70vh",
          margin: "80px auto",
          overflow: "hidden",
        },
      }}
      content={[
        {
          id: containerId,
          parent: BODY,
          ...settings.default,
          properties: {
            ...settings.default.properties,
            padding: 100,
            backgroundColor: "#34495e",
          },
        },
        ...sampleContentData.filter((itm) => itm.id !== containerId),
      ]}
    />
  );
};