import * as React from "react";
import ReactJson from "react-json-view";
import { uniqueId } from "lodash";
import OrderSummary from "./live";

import settings from "./settings";
import {
  sampleContentData,
  EditorWithCustomData,
  mobileStateData,
} from "@sc/modules/page/Builder/Builder.stories";
import { OrderSummaryTypes, OrderSummaryItemTypes } from "./types";
import { PromoCodeBuilder } from "./Properties/PromoCodeBuilder";

export default {
  title: "Plugins|Web Components/Moderate/Order Summary",
  component: OrderSummary,
};

export const Default: React.FC = () => {
  return (
    <OrderSummary
      cart={[
        {
          id: uniqueId(),
          title: "10 Minute Funnels Premium Subscription",
          value: "FREE",
          itemType: OrderSummaryItemTypes.PRODUCT,
        },
        {
          id: uniqueId(),
          title: "Shipping",
          value: 7.95,
          itemType: OrderSummaryItemTypes.PRODUCT,
        },
      ]}
      showHeader
      // showSubtotal
      showTotal
      style={{ marginTop: 40 }}
      type={OrderSummaryTypes.STANDARD}
    />
  );
};

export const PromoCodeEntry: React.FC = () => {
  const [data, setData] = React.useState([
    { id: uniqueId(), key: uniqueId(), code: "TESTCODEA", discount: "5%" },
    { id: uniqueId(), key: uniqueId(), code: "TESTCODEB", discount: "15%" },
    { id: uniqueId(), key: uniqueId(), code: "TESTCODEC", discount: "$18" },
  ]);

  return (
    <div style={{ width: 500, margin: "0 auto", padding: 100 }}>
      <div style={{ position: "absolute", top: 20, right: 20 }}>
        {/* <ReactJson src={data} /> */}
      </div>

      <PromoCodeBuilder
        data={data}
        onAdd={() =>
          setData([
            ...data,
            {
              id: uniqueId(),
              key: uniqueId(),
              code: uniqueId(`PROMO`),
              discount: "5%",
            },
          ])
        }
        onEdit={() => console.log("Edit Button Clicked")}
        onChange={(updatedData) => setData(updatedData)}
        onDelete={(payload, updatedData) => setData(updatedData)}
      />
    </div>
  );
};

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