// Full open-source React component available via npm
// https://www.npmjs.com/package/react-animated-counter
import React, {
	useState,
	useEffect,
	useRef
} from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
import { motion } from "https://cdn.skypack.dev/framer-motion@5.5.5";

// Utility function for formatting numbers
const formatForDisplay = (number, includeDecimals, decimalPrecision, includeCommas) => {
  const decimalCount = includeDecimals ? decimalPrecision : 0;
  const parsedNumber = parseFloat(`${Math.max(number, 0)}`).toFixed(decimalCount);
  const numberToFormat = includeCommas 
    ? parseFloat(parsedNumber).toLocaleString('en-US', { minimumFractionDigits: includeDecimals ? decimalPrecision : 0 }) 
    : parsedNumber;
  return numberToFormat.split('').reverse();
};

// Custom hook for tracking previous values
const usePrevious = (value) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
};

// Debounce utility
const debounce = (func, wait) => {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
};

// Decimal element component
const DecimalColumn = ({ fontSize, color, isComma, digitStyles }) => (
  <span
    style={{
      fontSize: fontSize,
      lineHeight: fontSize,
      color: color,
      marginLeft: `calc(-${fontSize} / 10)`,
      ...digitStyles,
    }}>
    {isComma ? ',' : '.'}
  </span>
);

// Individual number element component
const NumberColumn = React.memo(({
  digit,
  delta,
  fontSize,
  color,
  incrementColor,
  decrementColor,
  digitStyles,
  animateInitialValue = true,
}) => {
  const [position, setPosition] = React.useState(0);
  const [animationClass, setAnimationClass] = React.useState(null);
  const [isInitialized, setIsInitialized] = React.useState(false);
  const currentDigit = +digit;
  const previousDigit = usePrevious(+currentDigit);
  const columnContainer = React.useRef(null);

  const handleAnimationComplete = React.useCallback(
    debounce(() => {
      setAnimationClass("");
    }, 200),
    []
  );

  const setColumnToNumber = React.useCallback((number, animate = true) => {
    if (columnContainer?.current?.clientHeight) {
      const newPosition = columnContainer.current.clientHeight * parseInt(number, 10);
      setPosition(newPosition);
    }
  }, []);

  React.useLayoutEffect(() => {
    if (!isInitialized && columnContainer?.current?.clientHeight) {
      setColumnToNumber(digit, animateInitialValue);
      setIsInitialized(true);
    }
  }, [digit, setColumnToNumber, isInitialized, animateInitialValue]);

  React.useEffect(() => {
    if (isInitialized) {
      setAnimationClass(previousDigit !== currentDigit ? delta : '');
    }
  }, [digit, delta, isInitialized]);

  React.useEffect(() => {
    if (isInitialized) {
      setColumnToNumber(digit);
    }
  }, [digit, setColumnToNumber, isInitialized]);

  // If digit is negative symbol, simply return an unanimated character
  if (digit === '-') {
    return (
      <span
        style={{ 
          color: color,
          fontSize: fontSize,
          lineHeight: fontSize,
          marginRight: `calc(${fontSize} / 5)`,
          ...digitStyles
        }}
      >
        {digit}
      </span>
    );
  }

  return (
    <div
      className='ticker-column-container'
      ref={columnContainer}
      style={{ 
        fontSize: fontSize,
        lineHeight: fontSize,
        height: 'auto',
        color: color,
        '--increment-color': `${incrementColor}`,
        '--decrement-color': `${decrementColor}`,
        ...digitStyles,
      }}
    >
      <React.motion.div
        animate={{ x: 0, y: position }}
        className={`ticker-column ${animationClass}`}
        onAnimationComplete={handleAnimationComplete}
        initial={animateInitialValue ? { x: 0, y: 0 } : { x: 0, y: position }}
      >
        {[9, 8, 7, 6, 5, 4, 3, 2, 1, 0].map((num) => (
          <div className='ticker-digit' key={num}>
            <span style={{ 
              fontSize: fontSize,
              lineHeight: fontSize,
              ...digitStyles,
            }}>
              {num}
            </span>
          </div>
        ))}
      </React.motion.div>
      <span className='number-placeholder'>0</span>
    </div>
  );
}, (prevProps, nextProps) => prevProps.digit === nextProps.digit && prevProps.delta === nextProps.delta);

// Main component
const AnimatedCounter = ({
  value = 0,
  fontSize = '18px',
  color = 'black',
  incrementColor = '#32cd32',
  decrementColor = '#fe6862',
  includeDecimals = true,
  decimalPrecision = 2,
  includeCommas = false,
  containerStyles = {},
  digitStyles = {}, 
  animateInitialValue = false,
}) => {
  const numArray = formatForDisplay(Math.abs(value), includeDecimals, decimalPrecision, includeCommas);
  const previousNumber = usePrevious(value);
  const isNegative = value < 0;

  let delta = null;

  if (previousNumber !== null) {
    if (value > previousNumber) {
      delta = 'increase';
    } else if (value < previousNumber) {
      delta = 'decrease';
    }
  }

  return (
    <motion.div
      layout
      className='ticker-view'
      style={{ ...containerStyles }}
    >
      {/* Format integer to NumberColumn components */}
      {numArray.map((number, index) =>
        number === "." || number === "," ? (
          <DecimalColumn
            key={index}
            fontSize={fontSize}
            color={color}
            isComma={number === ","}
            digitStyles={digitStyles}
          />
        ) : (
          <NumberColumn
            key={index}
            digit={number}
            delta={delta}
            color={color}
            fontSize={fontSize}
            incrementColor={incrementColor}
            decrementColor={decrementColor}
            digitStyles={digitStyles}
            animateInitialValue={animateInitialValue}
          />
        )
      )}
      {/* If number is negative, render '-' feedback */}
      {isNegative &&
        <NumberColumn
          key={'negative-feedback'}
          digit={'-'}
          delta={delta}
          color={color}
          fontSize={fontSize}
          incrementColor={incrementColor}
          decrementColor={decrementColor}
          digitStyles={digitStyles}
          animateInitialValue={animateInitialValue}
        />
      }
    </motion.div>
  );
};

// App component with slider
const App = () => {
  const [value, setValue] = React.useState(0);

  return (
    <div className="App">
      <AnimatedCounter
        value={value}
        fontSize="120px"
        color="white"
        incrementColor="#73d46a"
        decrementColor="#fe6862"
        includeDecimals={false}
        includeCommas={true}
      />
      <input
        type="range"
        min="0"
        max="1000"
        value={value}
        onChange={(e) => setValue(parseInt(e.target.value))}
        style={{
          marginTop: '24px',
          width: '250px'
        }}
      />
    </div>
  );
};

// Render the app
ReactDOM.render(<App />, document.getElementById('root'));