import React from "react";
import {
  Shapes,
  Shape,
  ShapeTypes,
} from "@sc/plugins/webcomponents/v2/Shapes/component";
import Container from "../Container";
import Image from "../Image";

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

export default {
  title: "Plugins|Web Components/Challenging/Shapes",
  component: Shapes,
};

export const Default = () => (
  <div style={{ positon: "relative", backgroundColor: "green" }}>
    {/* <div style={{ position: "relative" }}> */}
    <Shapes
      style={{
        width: "100%",
        height: "100%",
        background: "#EEE",
        padding: 50,
      }}
      data={[
        {
          type: ShapeTypes.CIRCLE,
          style: { fill: "green", r: 100, cx: 50, cy: 50 },
          before: true,
        },
        {
          type: ShapeTypes.ELLIPSE,
          style: {
            fill: "yellow",
            stroke: "purple",
            strokeWidth: 2,
            rx: 250,
            ry: 100,
            cx: 500,
            cy: 120,
          },
          before: true,
        },
        {
          type: ShapeTypes.RECTANGLE,
          style: { fill: "blue", width: 250, height: 100, x: 500, y: 60 },
          before: true,
        },
        {
          type: ShapeTypes.LINE,
          style: {
            x1: 0,
            y1: 20,
            x2: 250,
            y2: 250,
            stroke: "red",
            strokeWidth: 6,
          },
          before: true,
        },
        {
          type: ShapeTypes.POLYGON,
          style: {
            points: "200,10 250,190 160, 210",
            fill: "lime",
            stroke: "purple",
            strokeWidth: 6,
          },
          after: true,
        },
        {
          type: ShapeTypes.POLYLINE,
          style: {
            points: "20,20 40,25 60,40 80,120 120,140 200,180",
            fill: "none",
            stroke: "black",
            strokeWidth: 6,
          },
          after: true,
        },
        {
          type: ShapeTypes.PATH,
          style: {
            d: "M 100 350 1 50 -300",
            stroke: "indigo",
            strokeWidth: 3,
            fill: "none",
          },
          after: true,
        },
        {
          type: ShapeTypes.POLYPATH,
          data: [
            {
              d: "M 100 350 1 50 -300",
              stroke: "red",
              strokeWidth: 3,
              fill: "none",
            },
            {
              d: "M 250 50 l 150 300",
              stroke: "red",
              strokeWidth: 3,
              fill: "none",
            },
            {
              d: "M 175 200 l 150 0",
              stroke: "green",
              strokeWidth: 3,
              fill: "none",
            },
            {
              d: "M 100 350 q 150 -300 300 0",
              stroke: "blue",
              strokeWidth: 5,
              fill: "none",
            },
          ],
          after: true,
        },
        {
          type: ShapeTypes.FILE,
          url: "https://upload.wikimedia.org/wikipedia/commons/c/c1/I-83.svg",
          style: { fill: "blue", zoom: 0.5 },
          before: true,
        },
      ]}
    >
      <Image
        style={{ marginTop: -50, maxHeight: 400 }}
        src="http://www.pngall.com/wp-content/uploads/2018/04/Businessman-Transparent.png"
      />
    </Shapes>
    {/* </div> */}
  </div>
);

export const Circle = () => (
  <Container style={{ width: 600, height: 500 }}>
    <Shapes style={{ width: "100%", height: "100%" }}>
      <Shape
        type={ShapeTypes.CIRCLE}
        style={{ fill: "purple", r: 200, cx: 300, cy: 250 }}
      />
    </Shapes>
  </Container>
);

export const Rectangle = () => (
  <Shapes style={{ width: 600, height: 500 }}>
    <Shape
      type={ShapeTypes.RECTANGLE}
      style={{ fill: "purple", width: 250, height: 100, x: 500, y: 60 }}
    />
  </Shapes>
);

export const Ellipse = () => (
  <Shapes style={{ width: "100%", height: 500 }}>
    <Shape
      type={ShapeTypes.ELLIPSE}
      style={{
        fill: "yellow",
        stroke: "purple",
        strokeWidth: 2,
        rx: 250,
        ry: 100,
        cx: 500,
        cy: 120,
      }}
    />
  </Shapes>
);

export const File = () => (
  <Shape
    type={ShapeTypes.FILE}
    url="https://upload.wikimedia.org/wikipedia/commons/c/c1/I-83.svg"
    // url="https://svgsilh.com/svg/157839.svg"
    // style={{ fill: "blue" }}
  />
);

export const AsClipPath: React.FC = () => {
  const data = [
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "50",
        cy: "50",
        r: "40",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "193.949",
        cy: "235",
        r: "74.576",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "426.576",
        cy: "108.305",
        r: "47.034",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "346.915",
        cy: "255.763",
        r: "43.644",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "255.39",
        cy: "82.882",
        r: "35.17",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "328.695",
        cy: "157.034",
        r: "25.424",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "594.797",
        cy: "360.424",
        r: "121.187",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "470.008",
        cy: "223.771",
        r: "31.992",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "299.525",
        cy: "400.762",
        r: "64.407",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "634.627",
        cy: "183.305",
        r: "92.373",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "136.746",
        cy: "172.712",
        r: "106.356",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "91.831",
        cy: "416.779",
        r: "36.017",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "125.305",
        cy: "335",
        r: "25.424",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "192.424",
        cy: "421.271",
        r: "20.509",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "184.847",
        cy: "362.543",
        r: "18.22",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "436.568",
        cy: "385.602",
        r: "72.635",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "345.644",
        cy: "90.085",
        r: "23.729",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "534.627",
        cy: "85",
        r: "42.373",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "426.305",
        cy: "12.017",
        r: "83.898",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "277.458",
        cy: "314.694",
        r: "22.068",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "413.229",
        cy: "195.381",
        r: "22.669",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "277.848",
        cy: "185",
        r: "16.949",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "493.102",
        cy: "158.729",
        r: "19.492",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "424.517",
        cy: "290.873",
        r: "24.517",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "71.067",
        cy: "348.56",
        r: "49.152",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "737.221",
        cy: "62.915",
        r: "50.898",
      },
    },
    {
      type: ShapeTypes.CIRCLE,
      before: true,
      style: {
        stroke: "#000000",
        strokeMiterLimit: "10",
        cx: "740",
        cy: "430",
        r: "50",
      },
    },
  ];

  return (
    <Container style={{ width: 800, margin: "0 auto", background: "green" }}>
      <Image
        style={{ maxWidth: "100%", clipPath: `url(#svgPath)` }}
        src="https://images.unsplash.com/photo-1531923981709-9fd5eb67572c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80"
      />
      <Shapes data={data} clipPathId="svgPath" />
    </Container>
  );
};
export const InTheEditor: React.FC = () => {
  return (
    <EditorWithCustomData
      content={[
        { id: "CustomField", parent: "u5j1r64m5rf", ...settings.default },
        ...sampleContentData,
      ]}
    />
  );
};