import React, { useEffect, useState } from 'react'
import $ from 'jquery'
import useScript from '../../hooks/useScript';
import useEffectCustom from '../../hooks/useEffectCustom';

import '../../scripts/textillate/assets/animate.css';
// import '../../scripts/textillate/assets/style.css';


export const Textillate = ({ option, children, controller=null }) => {
  useScript('https://code.jquery.com/jquery-3.6.0.min.js', {sync:false, defer:true});
  useScript('https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.min.js', {sync:false, defer:true});
  useScript('https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js', {sync:false, defer:true});
  useScript('https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext.min.js', {sync:false, defer:true});
  // useScript(process.env.PUBLIC_URL + '/scripts/jquery/jquery.min.js', {sync:false, defer:true});
  // useScript(process.env.PUBLIC_URL + '/scripts/textillate/jquery.textillate.js', {sync:false, defer:true});
  // useScript(process.env.PUBLIC_URL + '/scripts/textillate/assets/jquery.lettering.js', {sync:false, defer:true});
  // useScript(process.env.PUBLIC_URL + '/scripts/textillate/assets/jquery.fittext.js', {sync:false, defer:true});

  // create a ramdom classname
  const [className, setClassName] = useState(Math.random().toString(36).substring(7));
  const [isFinishLoad, setIsFinishLoad] = useState(false);

  
  useEffectCustom(() => {
    // console.log('useEffectCustom');
    if(window?.$ && window?.$(`.item_${className}`)?.textillate){
      setIsFinishLoad(true);
      // console.log('create textillate');
      window.$(`.item_${className}`).textillate(option);
      
      // window.$(function () {
        // event handler
      // })
    }
  }, [window.$, option, className], { count: 0, onStart: false, counting: isFinishLoad, timeInterval: 500 });

  useEffect(() => {
    // console.log('controller update')
    if(window?.$ && controller!==null){ 
      controller((pre) => 
        pre && Object.keys(pre).length===0 && Object.getPrototypeOf(pre)===Object.prototype 
        ? ({
          start: () => window.$(`.item_${className}`).textillate('start'),
          stop: () => {
            window.$(`.item_${className}`).one('inAnimationEnd.tlt', (e) => 
              setTimeout(() => 
                window.$(`.item_${className}`).textillate('stop')
              , option?.minDisplayTime/2 || 1000)
            )
          },
          in: () => window.$(`.item_${className}`).textillate('in'),
          out: () => window.$(`.item_${className}`).textillate('out'),
          on: (event, callback) => {
            window.$(`.item_${className}`).on(event, function (e) {
              callback(e);
            });
          }
        })
        : pre
      )
    }
  }, [window.$, controller])

    
  return (
    <span style={{visibility: 'hidden'}} className={`textillate-items item_${className}`}>
        {children}
    </ span>
  )
}