import _ from "lodash";
import React from "react";

export const getRenderer = settings => {
  const {
    showDays,
    showHours,
    showMinutes,
    showSeconds,
    showDivider,
    showLabels,
    properties
  } = settings;

  const dimensionStyle = {
    ...properties,
    marginTop: 0,
    display: "inline-block"
  };

  const dimensionLabelStyle = {
    textAlign: "center",
    textTransform: "uppercase",
    fontFamily: _.get(properties, "fontFamily", "inherit"),
    color: _.get(properties, "color", "inherit"),
    fontSize: "13pt"
  };

  const dividerStyle = {
    border: "none",
    background: "transparent"
  };

  return ({ days, hours, minutes, seconds, completed }) => {
    if (completed) {
      return <p style={{ ...dimensionLabelStyle }}>Your time has expired</p>;
    } else {
      return (
        <div>
          {showDays && (
            <>
              <div style={{ ...dimensionStyle }}>
                {days}
                {showLabels && <p style={{ ...dimensionLabelStyle }}>Days</p>}
              </div>
              {showDivider && (
                <div style={{ ...dimensionStyle, ...dividerStyle }}>
                  :
                  {showLabels && (
                    <p style={{ ...dimensionLabelStyle }}>&nbsp;</p>
                  )}
                </div>
              )}
            </>
          )}
          {showHours && (
            <>
              <div style={{ ...dimensionStyle }}>
                {hours}
                {showLabels && <p style={{ ...dimensionLabelStyle }}>Hours</p>}
              </div>
              {showDivider && (
                <div style={{ ...dimensionStyle, ...dividerStyle }}>
                  :
                  {showLabels && (
                    <p style={{ ...dimensionLabelStyle }}>&nbsp;</p>
                  )}
                </div>
              )}
            </>
          )}
          {showMinutes && (
            <>
              <div style={{ ...dimensionStyle }}>
                {minutes}
                {showLabels && (
                  <p style={{ ...dimensionLabelStyle }}>Minutes</p>
                )}
              </div>
              {showDivider && (
                <div style={{ ...dimensionStyle, ...dividerStyle }}>
                  :
                  {showLabels && (
                    <p style={{ ...dimensionLabelStyle }}>&nbsp;</p>
                  )}
                </div>
              )}
            </>
          )}
          {showSeconds && (
            <div style={{ ...dimensionStyle }}>
              {seconds}
              {showLabels && <p style={{ ...dimensionLabelStyle }}>Seconds</p>}
            </div>
          )}
        </div>
      );
    }
  };
};