import React, { FC, ReactNode, useEffect, useState } from 'react'

import './scss/loaders.scss'

export interface LoaderProps {
  visible: boolean,
  loaderType?: string,
  color?: string,
  background?: string
}

const Loader: FC<LoaderProps> = ({
  visible = false,
  loaderType = 'ballScaleMultiple',
  color = '#000',
  background = '#fff'
}) => {

  interface loaderItem {
    loader: ReactNode,
    tooltip: ReactNode
  }

  interface loadersDictionary {
    [key: string]: loaderItem
  }


  const loaders: loadersDictionary = {
    ballPulse: {
      loader: <div className="loader-inner ball-pulse">
        {[...Array(3)].map((item, index) => <div key={index} style={{
          backgroundColor: color
        }}></div>)}
      </div>,
      tooltip: <span className="tooltip"><p>ball-pulse</p></span>
    },

    ballGridPulse: {
      loader: <div className="loader-inner ball-grid-pulse">
        {[...Array(9)].map((item, index) => <div key={index} style={{
          backgroundColor: color
        }}></div>)}
      </div>,
      tooltip: <span className="tooltip"><p>ball-grid-pulse</p></span>
    },

    ballClipRotate: {
      loader: <div className="loader-inner ball-clip-rotate">
        <div style={{
          backgroundColor: color
        }}></div>
      </div>,
      tooltip: <span className="tooltip"><p>ball-clip-rotate</p></span>
    },

    ballClipRotatePulse: {
      loader: <div className="loader-inner ball-clip-rotate-pulse">
        {[...Array(2)].map((item, index) => <div key={index} style={{
          backgroundColor: color
        }}></div>)}
      </div>,
      tooltip: <span className="tooltip"><p>ball-clip-rotate-pulse</p></span>
    },

    squareSpin: {
      loader: <div className="loader-inner square-spin">
        <div style={{
          backgroundColor: color
        }}></div>
      </div>,
      tooltip: <span className="tooltip"><p>square-spin</p></span>
    },

    ballClipRotateMultiple: {
      loader: <div className="loader-inner ball-clip-rotate-multiple">
        {[...Array(2)].map((item, index) => <div key={index} style={{
          backgroundColor: color
        }}></div>)}
      </div>,
      tooltip: <span className="tooltip"><p>ball-clip-rotate-multiple</p></span>
    },

    ballPulseRise: {
      loader: <div className="loader-inner ball-pulse-rise">
        {[...Array(5)].map((item, index) => <div key={index} style={{
          backgroundColor: color
        }}></div>)}
      </div>,
      tooltip: <span className="tooltip"><p>ball-pulse-rise</p></span>
    },

    ballRotate: {
      loader: <div className="loader-inner ball-rotate">
        <div style={{
          backgroundColor: color
        }}></div>
      </div>,
      tooltip: <span className="tooltip"><p>ball-rotate</p></span>
    },

    cubeTransion: {
      loader: <div className="loader-inner cube-transition">
        {[...Array(2)].map((item, index) => <div key={index} style={{
          backgroundColor: color
        }}></div>)}
      </div>,
      tooltip: <span className="tooltip"><p>cube-transition</p></span>
    },

    ballZigZag: {
      loader: <div className="loader-inner ball-zig-zag">
        {[...Array(2)].map((item, index) => <div key={index} style={{
          backgroundColor: color
        }}></div>)}
      </div>,
      tooltip: <span className="tooltip"><p>ball-zig-zag</p></span>
    },

    ballZigZagDeflect: {
      loader: <div className="loader-inner ball-zig-zag-deflect">
        {[...Array(2)].map((item, index) => <div key={index} style={{
          backgroundColor: color
        }}></div>)}
      </div>,
      tooltip: <span className="tooltip"><p>ball-zig-zag-deflect</p></span>
    },

    ballTrianglePath: {
      loader: <div className="loader-inner ball-triangle-path">
        {[...Array(3)].map((item, index) => <div key={index} style={{
          backgroundColor: color
        }}></div>)}
      </div>,
      tooltip: <span className="tooltip"><p>ball-triangle-path</p></span>
    },

    ballScale: {
      loader: <div className="loader-inner ball-scale">
        <div style={{
          backgroundColor: color
        }}></div>
      </div>,
      tooltip: <span className="tooltip"><p>ball-scale</p></span>
    },

    lineScale: {
      loader: <div className="loader-inner line-scale">
        {[...Array(5)].map((item, index) => <div key={index} style={{
          backgroundColor: color
        }}></div>)}
      </div>,
      tooltip: <span className="tooltip"><p>line-scale</p></span>
    },

    lineScaleParty: {
      loader: <div className="loader-inner line-scale-party">
        {[...Array(4)].map((item, index) => <div key={index} style={{
          backgroundColor: color
        }}></div>)}
      </div>,
      tooltip: <span className="tooltip"><p>line-scale-party</p></span>
    },

    ballScaleMultiple: {
      loader: <div className="loader-inner ball-scale-multiple">
        {[...Array(3)].map((item, index) => <div key={index} style={{
          backgroundColor: color
        }}></div>)}
      </div>,
      tooltip: <span className="tooltip"><p>ball-scale-multiple</p></span>
    },

    ballPulseSync: {
      loader: <div className="loader-inner ball-pulse-sync">
        {[...Array(3)].map((item, index) => <div key={index} style={{
          backgroundColor: color
        }}></div>)}
      </div>,
      tooltip: <span className="tooltip"><p>ball-pulse-sync</p></span>
    },

    ballBeat: {
      loader: <div className="loader-inner ball-beat">
        {[...Array(3)].map((item, index) => <div key={index} style={{
          backgroundColor: color
        }}></div>)}
      </div>,
      tooltip: <span className="tooltip"><p>ball-beat</p></span>
    },

    lineScalePulseOut: {
      loader: <div className="loader-inner line-scale-pulse-out">
        {[...Array(5)].map((item, index) => <div key={index} style={{
          backgroundColor: color
        }}></div>)}
      </div>,
      tooltip: <span className="tooltip"><p>line-scale-pulse-out</p></span>
    },

    lineScalePulseOutRapid: {
      loader: <div className="loader-inner line-scale-pulse-out-rapid">
        {[...Array(5)].map((item, index) => <div key={index} style={{
          backgroundColor: color
        }}></div>)}
      </div>,
      tooltip: <span className="tooltip"><p>line-scale-pulse-out-rapid</p></span>
    },

    ballScaleRipple: {
      loader: <div className="loader-inner ball-scale-ripple">
        <div style={{
          backgroundColor: color
        }}></div>
      </div>,
      tooltip: <span className="tooltip"><p>ball-scale-ripple</p></span>
    },

    ballScaleRippleMultiple: {
      loader: <div className="loader-inner ball-scale-ripple-multiple">
        {[...Array(3)].map((item, index) => <div key={index} style={{
          backgroundColor: color
        }}></div>)}
      </div>,
      tooltip: <span className="tooltip"><p>ball-scale-ripple-multiple</p></span>
    },

    ballSpinFadeLoader: {
      loader: <div className="loader-inner ball-spin-fade-loader">
        {[...Array(8)].map((item, index) => <div key={index} style={{
          backgroundColor: color
        }}></div>)}
      </div>,
      tooltip: <span className="tooltip"><p>ball-spin-fade-loader</p></span>
    },

    lineSpinFadeLoader: {
      loader: <div className="loader-inner line-spin-fade-loader">
        {[...Array(8)].map((item, index) => <div key={index} style={{
          backgroundColor: color
        }}></div>)}
      </div>,
      tooltip: <span className="tooltip"><p>line-spin-fade-loader</p></span>
    },

    triangleSkewSpin: {
      loader: <div className="loader-inner triangle-skew-spin">
        <div style={{
          backgroundColor: color
        }}></div>
      </div>,
      tooltip: <span className="tooltip"><p>triangle-skew-spin</p></span>
    },

    pacman: {
      loader: <div className="loader-inner pacman">
        {[...Array(5)].map((item, index) => <div key={index} style={{
          backgroundColor: color
        }}></div>)}
      </div>,
      tooltip: <span className="tooltip"><p>pacman</p></span>
    },

    semiCircleSpin: {
      loader: <div className="loader-inner semi-circle-spin">
        <div style={{
          backgroundColor: color
        }}></div>
      </div>,
      tooltip: <span className="tooltip"><p>semi-circle-spin</p></span>
    },

    ballGridBeat: {
      loader: <div className="loader-inner ball-grid-beat">
        {[...Array(9)].map((item, index) => <div key={index} style={{
          backgroundColor: color
        }}></div>)}
      </div>,
      tooltip: <span className="tooltip"><p>ball-grid-beat</p></span>
    },

    ballScaleRandom: {
      loader: <div className="loader-inner ball-scale-random">
        {[...Array(3)].map((item, index) => <div key={index} style={{
          backgroundColor: color
        }}></div>)}
      </div>,
      tooltip: <span className="tooltip"><p>ball-scale-random</p></span>
    }
  }

  const mainStyle = {
    position: 'fixed',
    top: '0',
    left: '0',
    width: '100%',
    height: '100%',
    zIndex: '1000',
    background: background
  }

  const fadeInStyle = {
    display: 'block',
    zIndex: 2147483647,
    opacity: 1,
    transition: 'width 0.25s, height 0.25s, opacity 0.25s 0.25s'
  }

  const fadeOutStyle = {
    display: 'none',
    opacity: 0,
    transition: 'width 0.5s, height 0.5s, opacity 0.5s 0.5s'
  }

  const loaderStyle = { ...mainStyle, ...(visible ? fadeInStyle : fadeOutStyle)}

  return <div className="loader-show" style={loaderStyle as any}>
    <div className="loader" style={{
      position: 'absolute',
      display: 'block',
      top: '50%',
      left: '50%'
    }}>
      {loaders[loaderType].loader}
    </div>
  </div>
}

export {
  Loader
}