/*
  Get a random integer between two input numbers
*/
const randomIntFromInterval = (
  min: number,
  max: number
): number => { // min and max included
  return Math.floor(Math.random() * (max - min + 1) + min)
}
/*
  Invoke to remove all elements of a given className from the DOM
*/
const removeElementsByClass = (
  className: string
): any => {
  let elements
  typeof document !== `undefined`
    ? elements = document.getElementsByClassName(className)
    : null

  while(elements.length > 0) {
    elements[0].parentNode.removeChild(elements[0])
  }
}
/*
  Window object doesn't exist outside of the window!
*/
const getDocumentHeight = (): number | null => {
  let body
  typeof document !== `undefined`
    ? body = document.body
    : null

  let html
  typeof document !== `undefined`
    ? html = document.documentElement
    : null

  return typeof document !== `undefined`
    ? Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight)
    : null
}
/*
  Window object doesn't exist outside of the window!
*/
const getWindowInnerWidth = (): number => {
  return typeof window !== `undefined`
    ? window.innerWidth
    : 0
}

const squareSolid = {
  bordered: false,
  colors: [
    '#FB7185', // rose 400
    '#F472B6', // pink 400
    '#38BDF8' // lightBlue 400
  ],
  degrees: 90,
  icon: false,
  innerClassArray: ['inner-square-solid'],
  innerElementType: 'div',
  max: 220,
  min: 60,
  outerClassArray: ['outer-square-solid'],
  outerElementType: 'div'
}

const squareOutline = {
  bordered: true,
  colors: [
    '#5EEAD4', // teal 300
    '#FAFAF9' // warm gray 50
  ],
  icon: false,
  innerClassArray: ['inner-square-outline'],
  innerElementType: 'div',
  max: 120,
  min: 20,
  outerClassArray: ['outer-square-outline'],
  outerElementType: 'div'
}

const triangles = {
  bordered: true,
  colors: [
    '#A78BFA', // violet 400
    '#38BDF8', // lightBlue 400
  ],
  icon: true,
  innerClassArray: ['inner-triangle', `fas`, `fa-triangle`],
  innerElementType: 'i',
  max: 100,
  min: 40,
  outerClassArray: ['outer-triangle'],
  outerElementType: 'div'
}

const bolts = {
  bordered: true,
  colors: [
    '#FEF08A', // yellow 200
    '#67E8F9', // cyan 300
  ],
  icon: true,
  innerClassArray: ['inner-bolt', `fas`, `fa-bolt`],
  innerElementType: 'i',
  max: 80,
  min: 40,
  outerClassArray: ['outer-bolt'],
  outerElementType: 'div'
}

const waves = {
  bordered: true,
  colors: [
    '#1C1917' // warm gray 900
  ],
  icon: true,
  innerClassArray: ['inner-wave', `fas`, `fa-water`],
  innerElementType: 'i',
  max: 60,
  min: 20,
  outerClassArray: ['outer-wave'],
  outerElementType: 'div'
}

interface ShapeElementParameters {
  bordered: boolean,
  colors: string[],
  degrees?: number,
  icon: boolean,
  innerClassArray: string[],
  innerElementType: string,
  max: number,
  min: number,
  outerClassArray: string[],
  outerElementType: string
}

const createShapeElement = ({
  bordered,
  colors,
  degrees,
  icon,
  innerClassArray,
  innerElementType,
  max,
  min,
  outerClassArray,
  outerElementType
}: ShapeElementParameters) => {
  let height: number = getDocumentHeight()

  const canvas: HTMLElement | null = document.getElementById('canvas')

  const size: number = randomIntFromInterval(min, max)
  const bg: string = colors[Math.floor(Math.random() * colors.length)]

  const outerElement: HTMLElement = document.createElement(outerElementType)
  outerElement.classList.add(...outerClassArray)
  icon
    ? outerElement.style.fontSize = size + 'px'
    : (
      outerElement.style.width = size + 'px',
      outerElement.style.height = size + 'px'
    )

  const innerElement: HTMLElement = document.createElement(innerElementType)
  innerElement.classList.add(...innerClassArray)
  icon
    ? innerElement.style.fontSize = size + 'px'
    : (
      innerElement.style.width = size + 'px',
      innerElement.style.height = size + 'px'
    )
  innerElement.style.top = randomIntFromInterval(0, height).toString() + 'px'
  innerElement.style.left = randomIntFromInterval(0, innerWidth).toString() + 'px'

  degrees ? innerElement.style.transform = `rotate(${Math.floor(Math.random() * degrees)}deg)` : null

  icon
    ? innerElement.style.color = bg
    : bordered
      ? innerElement.style.borderColor = bg
      : innerElement.style.background = bg

  canvas.appendChild(outerElement)
  outerElement.appendChild(innerElement)
}

const ModernMemphis = () => {
  const [height, setHeight] = React.useState(getDocumentHeight)
  const [width, setWidth] = React.useState(getWindowInnerWidth)
  
  React.useEffect(() => {
    setTimeout(() => {
      // Initialize the solid squares
      for (let i = 0; i < 10; i++) {
        createShapeElement(squareSolid)
      }
      // Initialize the outline squares
      for (let i = 0; i < 7; i++) {
        createShapeElement(squareOutline)
      }
      // Initialize the triangles
      for (let i = 0; i < 7; i++) {
        createShapeElement(triangles)
      }
      // Initialize the bolts
      for (let i = 0; i < 5; i++) {
        createShapeElement(bolts)
      }
      // Initialize the waves
      for (let i = 0; i < 20; i++) {
        createShapeElement(waves)
      }
    }, 350)

    const handleWindowResize = () => {
      setWidth(getWindowInnerWidth)
      setHeight(getDocumentHeight)
    }

    typeof window !== `undefined`
      ? window.addEventListener("resize", handleWindowResize)
      : null

    return () => {
      typeof window !== `undefined`
        ? window.removeEventListener("resize", handleWindowResize)
        : null
    }
  }, [])

  React.useEffect(() => {
    const removeElements = (populateElements) => {
      removeElementsByClass('outer-square-solid')
      removeElementsByClass('outer-square-outline')
      removeElementsByClass('outer-triangle')
      removeElementsByClass('outer-bolt')
      removeElementsByClass('outer-wave')

      populateElements()
    }

    const populateElements = () => {
      // Re-draw the solid squares
      for (let i = 0; i < 10; i++) {
        createShapeElement(squareSolid)
      }
      // Re-draw the outline squares
      for (let i = 0; i < 7; i++) {
        createShapeElement(squareOutline)
      }
      // Re-draw the triangles
      for (let i = 0; i < 7; i++) {
        createShapeElement(triangles)
      }
      // Re-draw the bolts
      for (let i = 0; i < 5; i++) {
        createShapeElement(bolts)
      }
      // Re-draw the waves
      for (let i = 0; i < 20; i++) {
        createShapeElement(waves)
      }
    }

    removeElements(populateElements)
  }, [width, height])
  
  return(
    <div 
      id="canvas" 
      class="bg-gradient-to-b from-indigo-400 via-red-200 to-indigo-700"
      style={{
        height: '200vh',
        width: '100vw',
        overflow: 'hidden'
      }}
    >
    </div>
  )
}

ReactDOM.render(<ModernMemphis />, document.getElementById('app'))