import * as React from "react";
import {
  getDimensionStyle,
  getDimensionLabelStyle,
  getDividerStyle,
} from "./style";

import { CountdownProps } from "./types";
// import div from "../div";
// import div from "../div";

export const RenderCountdown = ({
  showDays,
  showHours,
  showMinutes,
  showSeconds,
  showDivider,
  showLabels,
  style,
  labelStyle,
  dimensionStyle,
  dividerStyle,
  numberStyle,
}: CountdownProps) => {
  const Divider = () => (
    <div
      style={{
        // ...getDimensionStyle(dimensionStyle),
        ...getDividerStyle(dividerStyle),
      }}
    >
      :
      {showLabels && (
        <p style={{ ...getDimensionLabelStyle(labelStyle) }}>&nbsp;</p>
      )}
    </div>
  );

  const Dimension = ({ caption, count }) => (
    <div style={getDimensionStyle(dimensionStyle)}>
      <div style={numberStyle}>{count}</div>
      {showLabels && (
        <p style={getDimensionLabelStyle(labelStyle)}>{caption}</p>
      )}
    </div>
  );

  return ({ hours, days, minutes, seconds, completed }) => {
    if (completed)
      return (
        <p style={getDimensionLabelStyle(labelStyle)}>Your time has expired</p>
      );
    return (
      <div style={style}>
        {showDays && (
          <>
            <Dimension caption="Days" count={days} />
            {showDivider && <Divider />}
          </>
        )}
        {showHours && (
          <>
            <Dimension caption="Hours" count={hours} />
            {showDivider && <Divider />}
          </>
        )}
        {showMinutes && (
          <>
            <Dimension caption="Minutes" count={minutes} />
            {showDivider && <Divider />}
          </>
        )}
        {showSeconds && (
          <>
            <Dimension caption="Seconds" count={seconds} />
          </>
        )}
      </div>
    );
  };
};