import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'

import SsidChartIcon from '@mui/icons-material/SsidChart'

import { SceneState } from '../../../functions/sceneRenderFunctions'
import { InfoTooltip } from '../../layout/Tooltip'
import styles from '../styles.module.scss'

/**
 * Stats used to show stats of  memory and  render.
 *
 * @constructor
 */
const StatsTool = () => {
  const [info, setInfo] = useState<any>({})
  const [isVisible, setVisible] = useState(false)
  const { t } = useTranslation()

  useEffect(() => {
    SceneState.onUpdateStats = (info) => {
      setInfo({
        geometries: info.memory.geometries,
        textures: info.memory.textures,
        fps: (info.render as any).fps,
        frameTime: (info.render as any).frameTime,
        calls: info.render.calls,
        triangles: info.render.triangles,
        points: info.render.points,
        lines: info.render.lines
      })
    }

    return () => {
      SceneState.onUpdateStats = undefined
    }
  }, [])

  const toggleStats = () => {
    setVisible(!isVisible)
  }

  /**
   * Rendering stats view in ViewportToolbar and shows when click on toggleStats
   */
  return (
    <>
      <div className={styles.toolbarInputGroup + ' ' + styles.playButtonContainer} id="stats">
        <InfoTooltip title="Toggle Stats">
          <button onClick={toggleStats} className={styles.toolButton + ' ' + (isVisible ? styles.selected : '')}>
            <SsidChartIcon fontSize="small" />
          </button>
        </InfoTooltip>
      </div>
      {isVisible && (
        <div className={styles.statsContainer}>
          <h3>{t('editor:viewport.state.header')}</h3>
          {info && (
            <ul>
              <li>
                {t('editor:viewport.state.memory')}
                <ul>
                  <li>
                    {t('editor:viewport.state.geometries')}: {(info as any).geometries}
                  </li>
                  <li>
                    {t('editor:viewport.state.textures')}: {(info as any).textures}
                  </li>
                </ul>
              </li>
              <li>
                {t('editor:viewport.state.render')}:
                <ul>
                  <li>
                    {t('editor:viewport.state.FPS')}: {Math.round((info as any).fps)}
                  </li>
                  <li>
                    {t('editor:viewport.state.frameTime')}: {Math.round((info as any).frameTime)}ms
                  </li>
                  <li>
                    {t('editor:viewport.state.calls')}: {(info as any).calls}
                  </li>
                  <li>
                    {t('editor:viewport.state.triangles')}: {(info as any).triangles}
                  </li>
                  <li>
                    {t('editor:viewport.state.points')}: {(info as any).points}
                  </li>
                  <li>
                    {t('editor:viewport.state.lines')}: {(info as any).lines}
                  </li>
                </ul>
              </li>
            </ul>
          )}
        </div>
      )}
    </>
  )
}

export default StatsTool