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

import { EditorObjectState } from "@sc/modules/v2/Editor/components/EditorObject/types";
import { PageSectionCategory } from "@sc/plugins/misc/v2/blocks/weblayouts/types";

import {
  sampleContentData,
  EditorWithCustomData,
} from "@sc/modules/page/Builder/Builder.stories";
import { BODY } from "@sc/modules/v2/Editor/types";
import settings from "@sc/plugins/webcomponents/v2/Section/settings";

import SectionsLegend from "./SectionsLegend";
import SectionItem from "./SectionItem";

export default {
  title: "Plugins|Page Sections/SectionsLegend",
  component: SectionsLegend,
  subcomponents: { SectionItem },
  excludeStories: /.*Data$/,
};

export const sectionsData = [
  {
    id: "HEADER",
    label: "Header",
    type: PageSectionCategory.HEADER,
  },
  {
    id: "BENEFIT",
    label: "Benefit",
    type: PageSectionCategory.BENEFIT,
    settings: { state: EditorObjectState.ACTIVE },
  },
  { id: "CTA", label: "Cta", type: PageSectionCategory.CTA },
  {
    id: "CONTENT",
    label: "Content",
    type: PageSectionCategory.CONTENT,
  },
  {
    id: "PRICING",
    label: "Pricing",
    type: PageSectionCategory.PRICING,
  },
  {
    id: "SOCIALPROOF",
    label: "Socialproof",
    type: PageSectionCategory.SOCIALPROOF,
    settings: { state: EditorObjectState.HOVER },
  },
  { id: "FORM", label: "Form", type: PageSectionCategory.FORM },
  {
    id: "NAVIGATION",
    label: "Navigation",
    type: PageSectionCategory.NAVIGATION,
  },
  {
    id: "FOOTER",
    label: "Footer",
    type: PageSectionCategory.FOOTER,
  },
  {
    id: "GUARANTEE",
    label: "Guarantee",
    type: PageSectionCategory.GUARANTEE,
  },
  { id: "QUIZ", label: "Quiz", type: PageSectionCategory.QUIZ },
  {
    id: "URGENCY",
    label: "Urgency",
    type: PageSectionCategory.URGENCY,
  },
];

export const Default: any = () => {
  return (
    <SectionsLegend
      title="Page Sections"
      sections={sectionsData}
      onChange={(e) => console.log(e)}
    />
  );
};

Default.story = {
  parameters: {
    jest: ["SectionsLegend"],
  },
};

export const JustSectionItem: any = () => (
  <SectionItem
    id=""
    settings={{ state: EditorObjectState.NORMAL }}
    onClick={() => action("Clicked")}
    label="Name of the Section"
  />
);

JustSectionItem.story = {
  parameters: {
    jest: ["SectionItem"],
  },
};

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,
          label: PageSectionCategory.CTA,
          parent: BODY,
          ...settings.default,
          properties: {
            ...settings.default.properties,
            padding: 100,
            backgroundColor: "#34495e",
          },
        },
        {
          id: "section2",
          label: PageSectionCategory.HEADER,
          parent: BODY,
          ...settings.default,
          properties: {
            ...settings.default.properties,
            padding: 100,
            backgroundColor: "#ABBFC5",
          },
        },
        {
          ...sampleContentData[0],
          id: "lkskjdfldsjf",
          parent: "section2",
          properties: {
            ...sampleContentData[0].properties,
            color: "white",
          },
        },
        {
          id: "section3",
          label: PageSectionCategory.BENEFIT,
          parent: BODY,
          ...settings.default,
          properties: {
            ...settings.default.properties,
            padding: 100,
            backgroundColor: "#34495e",
          },
        },
        {
          ...sampleContentData[0],
          id: "vmkdsljf",
          parent: "section3",
        },
        ...sampleContentData.filter((itm) => itm.id !== containerId),
      ]}
    />
  );
};