import classNames from 'classnames'
import Drawer from '@/components/ui/Drawer'
import SidePanelContent, { SidePanelContentProps } from './SidePanelContent'
import CopyButton from '../ThemeConfigurator/CopyButton'
import withHeaderItem from '@/utils/hoc/withHeaderItem'
import { useStoreState, useStoreActions } from '@/store'
import type { CommonProps } from '@/proxy/common'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { FcEngineering } from 'react-icons/fc'
import { Tooltip } from '@/components/ui'

type SidePanelProps = SidePanelContentProps & CommonProps

const _SidePanel = (props: SidePanelProps) => {
  const { setPanelExpand } = useStoreActions((actions) => actions.theme)

  const { translate } = useLocalization()

  const { className, ...rest } = props

  const panelExpand = useStoreState((state) => state.theme.panelExpand)

  const direction = useStoreState((state) => state.theme.direction)

  const openPanel = () => {
    setPanelExpand(true)
  }

  const closePanel = () => {
    setPanelExpand(false)
    const bodyClassList = document.body.classList
    if (bodyClassList.contains('drawer-lock-scroll')) {
      bodyClassList.remove('drawer-lock-scroll', 'drawer-open')
    }
  }

  return (
    <>
      <Tooltip title={translate('::SidePanel.Title')}>
        <div className={classNames('text-2xl', className)} onClick={openPanel} {...rest}>
          <FcEngineering />
        </div>
      </Tooltip>
      <Drawer
        title={
          <div className="flex items-center justify-between gap-x-2">
            <h4>{translate('::SidePanel.Title')}</h4>
            <CopyButton />
          </div>
        }
        isOpen={panelExpand}
        placement={direction === 'rtl' ? 'left' : 'right'}
        width={375}
        onClose={closePanel}
        onRequestClose={closePanel}
      >
        <SidePanelContent callBackClose={closePanel} />
      </Drawer>
    </>
  )
}

const SidePanel = withHeaderItem(_SidePanel)

export default SidePanel