import React, { useRef, useEffect } from 'react'
import {
  ArrowUpOutlined,
  EyeInvisibleFilled,
  EyeFilled,
  ReloadOutlined,
  ArrowRightOutlined,
  LoadingOutlined,
  HomeOutlined,
  PlusOutlined
} from '@ant-design/icons'
import {
  Input,
  Tooltip
} from 'antd'
import {
  typeMap
} from '../../common/constants'
import classnames from 'classnames'
import AddrBookmark from './address-bookmark'
import KeywordFilter from './keyword-filter'

const e = window.translate

function renderAddonBefore (props, realPath) {
  const {
    type,
    host
  } = props
  const isShow = props[`${type}ShowHiddenFile`]
  const title = `${isShow ? e('hide') : e('show')} ${e('hfd')}`
  const Icon = isShow ? EyeFilled : EyeInvisibleFilled
  const keywordProps = {
    keyword: props[`${type}Keyword`],
    type,
    updateKeyword: props.updateKeyword
  }
  return (
    <>
      <Tooltip
        title={title}
        placement='topLeft'
        arrow={{ pointAtCenter: true }}
      >
        <Icon
          type='eye'
          className='mg1r'
          onClick={() => props.toggleShowHiddenFile(type)}
        />
      </Tooltip>
      <Tooltip
        title={e('goParent')}
        arrow={{ pointAtCenter: true }}
        placement='topLeft'
      >
        <ArrowUpOutlined
          onClick={() => props.goParent(type)}
          className='mg1r'
        />
      </Tooltip>
      <HomeOutlined
        onClick={() => props.gotoHome(type)}
        className='mg1r'
      />
      <KeywordFilter {...keywordProps} />
      <AddrBookmark
        store={window.store}
        realPath={realPath}
        host={host}
        type={type}
        className='mg1r'
        onClickHistory={props.onClickHistory}
      />
    </>
  )
}

function renderAddonAfter (isLoadingRemote, onGoto, GoIcon, type, handleUploadFromBrowser) {
  const handleClick = (e) => {
    e.stopPropagation()
    if (!isLoadingRemote) {
      onGoto(type)
    }
  }
  return (
    <>
      {
        type === typeMap.local && window.et.isWebApp
          ? (
            <PlusOutlined
              className='mg1r'
              title={e('uploadFromBrowser')}
              onClick={(e) => {
                e.stopPropagation()
                handleUploadFromBrowser()
              }}
            />
            )
          : null
      }
      <GoIcon
        onClick={handleClick}
      />
    </>
  )
}

function renderHistory (props, type) {
  const currentPath = props[type + 'Path']
  const options = props[type + 'PathHistory']
    .filter(o => o !== currentPath)
  const focused = props[type + 'InputFocus']
  if (!options.length) {
    return null
  }
  const cls = classnames(
    'sftp-history',
    `sftp-history-${type}`,
    { focused }
  )
  return (
    <div
      className={cls}
    >
      {
        options.map(o => {
          return (
            <div
              key={o}
              className='sftp-history-item'
              onClick={() => props.onClickHistory(type, o)}
            >
              {o}
            </div>
          )
        })
      }
    </div>
  )
}

export default function AddressBar (props) {
  const {
    loadingSftp,
    type,
    onGoto
  } = props
  const n = `${type}PathTemp`
  const path = props[n]
  const realPath = props[`${type}Path`]
  const isLoadingRemote = type === typeMap.remote && loadingSftp
  const GoIcon = isLoadingRemote
    ? LoadingOutlined
    : (realPath === path ? ReloadOutlined : ArrowRightOutlined)
  const inputRef = useRef(null)

  useEffect(() => {
    const wrapEl = inputRef.current
    if (!wrapEl) return
    const inputEl = wrapEl.querySelector('input')
    if (!inputEl) return
    const handler = () => props.onInputFocus(type)
    inputEl.addEventListener('click', handler)
    return () => {
      inputEl.removeEventListener('click', handler)
    }
  }, [type])

  return (
    <div className='pd1y sftp-title-wrap'>
      <div className='sftp-title' ref={inputRef}>
        <Input
          value={path}
          onChange={e => props.onChange(e, n)}
          onPressEnter={e => props.onGoto(type, e)}
          prefix={renderAddonBefore(props, realPath)}
          onBlur={() => props.onInputBlur(type)}
          disabled={loadingSftp}
          suffix={
            renderAddonAfter(isLoadingRemote, onGoto, GoIcon, type, props.handleUploadFromBrowser)
          }
        />
        {renderHistory(props, type)}
      </div>
    </div>
  )
}
