import React from 'react'

const wrapperStyle = {
  width: '100%',
  height: '100%',
  position: 'absolute',
  zIndex: 0,
  top: 0,
  left: 0,
  overflow: 'hidden',
}

const colors = [
  '#fff1f0',
  '#fff2e8',
  '#fff7e6',
  '#fffbe6',
  '#feffe6',
  '#fcffe6',
  '#f6ffed',
  '#e6fffb',
  '#e6f4ff',
  '#f0f5ff',
  '#f9f0ff',
  '#fff0f6',
]

export default (props) => {
  const ref = React.useRef();

  const [color1, color2] = React.useMemo(() => {
    const inx1 = Math.floor(Math.random() * colors.length);
    const inx2 = Math.floor(Math.random() * colors.length);

    return [colors[inx1], colors[inx2]];
  }, []);

  React.useEffect(() => {
    const dom = ref.current;
    const canvas = dom.firstElementChild;
    canvas.width = dom.offsetWidth;
    canvas.height = dom.offsetHeight;

    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const size = centerX / 3

    const ctx = canvas.getContext("2d");
    
    ctx.filter = `blur(200px)`;

    ctx.beginPath()
    ctx.fillStyle = color1; // "#ffd8bf";
    ctx.ellipse(centerX + 100, centerY + 80, size, size + Math.random() * 100, Math.PI / 4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.closePath();

    ctx.beginPath()
    ctx.fillStyle = color2; // "#e6fffb";
    ctx.ellipse(centerX + 400, centerY + 120, size, size + Math.random() * 100, Math.PI / 2, 0, 2 * Math.PI);
    ctx.fill();
    ctx.closePath();

  }, []);

  return (
    <div ref={ref} style={wrapperStyle}>
      <canvas>
      </canvas>
    </div>
  )
}