import * as React from "react";
import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
import { Countdown } from "./component";
import { CountDownTypes } from "./types";
import theme from "@sc/plugins/misc/v2/blocks/weblayouts/theme";

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

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

export const Default: React.FC = () => (
  <Countdown
    countType={CountDownTypes.EVENT}
    // eventDate={Date.now() + 2 * 24 * 60 * 60 * 1000}
    eventDate={
      Date.now() +
      (number("Days", 2) * 24 * 60 * 60 +
        number("Hours", 0) * 60 * 60 +
        number("Minutes", 0) * 60 +
        number("Seconds", 0)) *
        1000
    }
    // eventDate={Date.now() + number("Seconds", 2 * 24 * 60 * 60) * 1000}
    style={style.COUNTDOWN.style}
    dimensionStyle={style.COUNTDOWN.dimensionStyle}
    labelStyle={style.COUNTDOWN.labelStyle}
    numberStyle={style.COUNTDOWN.numberStyle}
    dividerStyle={style.COUNTDOWN.dividerStyle}
    showDivider={false}
    actions={{}}
  />
);

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