import React, { useEffect, useState } from 'react';
import './Placeholder.css';

const Placeholder = (props) => {
  const { bgColor = '#000', spinnerColor = '#fff', loading } = props;

  const [gradientBg, setGradientBg] = useState('');

  const hexToRgb = (hex) =>
    hex
      .replace(
        /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
        (m, r, g, b) => `#${r + r + g + g + b + b}`,
      )
      .substring(1)
      .match(/.{2}/g)
      .map((x) => parseInt(x, 16));

  const getRgba = (rgb, alpha) => {
    const [r, g, b] = rgb;

    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
  };

  useEffect(() => {
    const rgb = hexToRgb(bgColor);

    setGradientBg(
      `linear-gradient(0deg, ${getRgba(rgb, 1)} 50%, ${getRgba(
        rgb,
        0.9,
      )} 100%), linear-gradient(90deg, ${getRgba(rgb, 0.9)} 0%, ${getRgba(
        rgb,
        0.6,
      )} 100%), linear-gradient(180deg, ${getRgba(rgb, 0.6)} 0%, ${getRgba(
        rgb,
        0.3,
      )} 100%), linear-gradient(360deg, ${getRgba(rgb, 0.3)} 0%, ${getRgba(
        rgb,
        0,
      )} 100%)`,
    );
  }, [bgColor]);

  return (
    <div className="placeholder" style={{ background: bgColor }}>
      <div className="placeholder-content">
        {loading && (
          <div
            className="placeholder-spinner"
            style={{ background: spinnerColor }}
          >
            <div
              className="placeholder-gradient"
              style={{ backgroundImage: gradientBg }}
            />
          </div>
        )}
      </div>
    </div>
  );
};

export default Placeholder;