import React, { useEffect, useState } from 'react'
import { Button, Icon, ClickOutside } from '$core-components'
import { t } from '$themelocalization'
import UEditProvider from './ueditProvider'
import './GeneralTools.scss'
import EditorTooltip from './EditorTooltip'

const GeneralTools = () => {
  const [isPreviewMode, setIsPreviewMode] = useState(true)
  const [showinitialTooltip, setShowinitialTooltip] = useState(true)
  const [canUndo, setCanUndo] = useState(false)
  const [canRedo, setCanRedo] = useState(false)
  const [canZoomIn, setCanZoomIn] = useState(false)
  const [canZoomOut, setCanZoomOut] = useState(false)

  const onPreviewModeChange = () => {
    setIsPreviewMode(!isPreviewMode)
    UEditProvider.setViewMode(!isPreviewMode ? 'preview' : 'normal')
  }

  const updateZoom = () => {
    setCanZoomIn(UEditProvider.canZoomIn)
    setCanZoomOut(UEditProvider.canZoomOut)
  }

  useEffect(() => {
    const onUndoChange = () => setCanUndo(UEditProvider.uEdit?.getUndoService().canUndo())
    const onRedoChange = () => setCanRedo(UEditProvider.uEdit?.getUndoService().canRedo())
    const onDocumentReady = () => {
      UEditProvider.registerEvent('undoStackChanged.uEditStoreView.xmpie', onUndoChange)
      UEditProvider.registerEvent('redoStackChanged.uEditStoreView.xmpie', onRedoChange)
      updateZoom()
    }
    if (UEditProvider.element) {
      UEditProvider.registerEvent('documentReady.uEditStoreView.xmpie', onDocumentReady)
    }

    return () => {
      UEditProvider.unregisterEvent( 'undoStackChanged.uEditStoreView.xmpie', onUndoChange)
      UEditProvider.unregisterEvent('redoStackChanged.uEditStoreView.xmpie', onRedoChange)
      UEditProvider.unregisterEvent( 'documentReady.uEditStoreView.xmpie', onDocumentReady)
    }
  }, [])

  return <div className="uEdit-general-controls">
    <Button className="icon-btn uedit-undo" onClick={UEditProvider.undo} disabled={!canUndo}>
      <Icon name="uedit-undo.svg" width="22px" height="22px"/>
      <EditorTooltip width={80} text={`${t("UEdit.Undo")}`}/>
    </Button>
    <Button className="icon-btn uedit-redo" onClick={UEditProvider.redo} disabled={!canRedo}>
      <Icon name="uedit-redo.svg" width="22px" height="22px"/>
      <EditorTooltip width={80} text={`${t("UEdit.Redo")}`}/>
    </Button>
    <Button className="icon-btn uedit-zoom-out" onClick={() => {
      UEditProvider.zoomOut()
      updateZoom()
    }} disabled={!canZoomOut}>
      <Icon name="uedit-zoom-out.svg" width="22px" height="22px"/>
      <EditorTooltip width={110} text={`${t("UEdit.ZoomOut")}`}/>
    </Button>
    <Button className="icon-btn uedit-zoom-in" onClick={() => {
      UEditProvider.zoomIn()
      updateZoom()
    }} disabled={!canZoomIn}>
      <Icon name="uedit-zoom-in.svg" width="22px" height="22px"/>
      <EditorTooltip width={110} text={`${t("UEdit.ZoomIn")}`}/>
    </Button>
    <Button className="icon-btn uedit-preview-mode" onClick={onPreviewModeChange}>
      {isPreviewMode ? <Icon name="uedit-toggle-content-objects.svg" width="22px" height="22px"/>
          : <Icon name="uedit-toggle-content-objects-crossed.svg" width="22px" height="22px"/>}
      {showinitialTooltip && <ClickOutside trigger={() => setShowinitialTooltip(false)} className="uedit-preview-tooltip-click-wrapper">
        <EditorTooltip className={'uedit-preview-tooltip'} width={200} text={`${t("UEdit.PreviewTooltip")}`} position={'top'}/>
      </ClickOutside>}
      {!showinitialTooltip && <EditorTooltip width={200} text={isPreviewMode ? `${t("UEdit.PreviewTooltip")}` : `${t("UEdit.PreviewTooltipActive")}`}/>}
    </Button>
  </div>
}

export default GeneralTools
