import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3;

import React, { useState, useRef, useEffect } from 'react';
import styled from 'styled-components';
import { Typography } from '../Common/Typography';

function useInterval(callback, delay) {
  var savedCallback = useRef(); // Remember the latest callback.

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]); // Set up the interval.

  useEffect(() => {
    function tick() {
      ;
      savedCallback == null ? void 0 : savedCallback.current();
    }

    if (delay !== null) {
      var id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

export var SlidingCTA = props => {
  var {
    elements,
    isEnabled
  } = props;
  var [count, setCount] = useState(0);
  useInterval(() => {
    if (count + 1 > (elements == null ? void 0 : elements.length) - 1) {
      return setCount(0);
    }

    return setCount(count + 1);
  }, 5000);
  if (!isEnabled) return null;
  return /*#__PURE__*/React.createElement(Container, {
    className: "container-fluid py-2"
  }, elements.map((element, index) => {
    return /*#__PURE__*/React.createElement(ContentWrapper, {
      key: "slidingCTA__" + element.label,
      as: "div",
      variant: "7",
      isActive: index === count,
      index: index
    }, element.label, (element == null ? void 0 : element.description) && /*#__PURE__*/React.createElement(CTA, null, element == null ? void 0 : element.description));
  }));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  height: auto;\n  min-height: 4.5rem;\n  transition: all 0.5s;\n  box-shadow: inset 0 -1px 0 0 ", ";\n  position: relative;\n  background: #f5f5f5;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  max-width: none;\n  min-width: 100vw;\n"])), (_ref) => {
  var {
    theme
  } = _ref;
  return theme.palette.light;
});
var ContentWrapper = styled(Typography)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  transform: ", ";\n  opacity: ", ";\n\n  transition: opacity 0.4s ease;\n  min-width: 100%;\n  color: ", ";\n  text-align: center;\n"])), props => props.isActive ? "translateX(-" + props.index * 100 + "%)" : 'translateX(300%)', props => props.isActive ? '1' : '0', (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.primary;
});
var CTA = styled.a(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  font-weight: 700;\n  padding-left: 5px;\n  cursor: pointer;\n  text-decoration: underline;\n\n  ", "\n"])), props => props.activated && "\n    text-decoration: none;\n  cursor: normal;\n  pointer-events: none;\n  ");
//# sourceMappingURL=slidingCTA.component.js.map