import * as React from "react";
import ReactCountdown from "react-countdown";
import { V1ObjectWrapper, convertProperties } from "../V1ObjectWrapper";
import { CountdownProps, PluginProps } from "./types";
import { RenderCountdown } from "./RenderCountdown";

import { ComponentTypes } from "../types";
import { EditorMode } from "@sc/modules/v2/Editor/types";

export const Countdown: React.FC<CountdownProps> = (props) => {
  const { eventDate } = props;

  const handleComplete = () => {
    console.log("Completed");
  };

  return (
    <div data-testid="WC-COUNTDOWN-LIVE">
      <ReactCountdown
        date={eventDate}
        intervalDelay={0}
        renderer={RenderCountdown(props)}
        onComplete={handleComplete}
      />
    </div>
  );
};

Countdown.defaultProps = {
  showDays: true,
  showHours: true,
  showMinutes: true,
  showSeconds: true,
  showLabels: true,
  showDivider: true,
  style: {},
  labelStyle: {},
  dimensionStyle: {},
  dividerStyle: {},
  numberStyle: {},
};

const CountdownPlugin: React.FC<PluginProps> = ({ settings }) => {
  const properties = convertProperties(settings.properties);

  return (
    <V1ObjectWrapper settings={settings}>
      <Countdown
        {...settings}
        mode={EditorMode.LIVE}
        numberStyle={{
          ...settings.numberStyle,
          ...properties,
        }}
      />
    </V1ObjectWrapper>
  );
};

export const onComponentRender = (hook, payload, actions) => {
  if (hook.id === "webcomponent" && payload.type === ComponentTypes.COUNTDOWN) {
    return [CountdownPlugin];
  }
};

export default Countdown;