// @flow
import React, { useState, useRef, useContext } from 'react'
import { Icon, Text } from '@siteone/pagebuilder-ui'
import { styled, Element } from '@siteone/system-core'
import Context from '../EventsContext'

const RenameDiv = styled(Element)`
  padding: 8px;
  border-radius: 3px;
  &:hover {
    background-color: #eaf7ff;
  }
`

const RenameInput = styled(Element)`
  height: ${props => (props.isEdit ? 'auto' : '0')};
  overflow: hidden;
  input {
    padding: 8px;
    width: 100%;
  }
`

const Name = styled(Element)`
  cursor: pointer;
  display: ${props => (!props.isEdit ? 'flex' : 'none')};
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-content: space-between;
  align-items: center;
`

const Pencil = styled(Icon)``


const Rename = ({ name, url }) => {
  const [isEdit, setEdit] = useState(false)
  const [value, setValue] = useState(name)
  const [status, setStatus] = useState(false)
  const inputEl = useRef(null)
  const ctx = useContext(Context)

  const showInput = () => {
    setEdit(true)
    inputEl.current.focus()
  }

  const renameFile = e => {
    const newName = e.target.value
    // only if name is changed
    if (newName !== name) {
      setStatus('progress')
      ctx.onRenameFile({ newName, url })
      .then(() => setStatus('success'))
      .catch(() => setStatus('failed'))
      .then(setTimeout(setStatus, 2000))
    }
    setEdit(false)
  }

  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      e.preventDefault()
      e.stopPropagation()
      renameFile(e)
    }
  }

  return (
    <RenameDiv>
      <Name onClick={showInput} isEdit={isEdit}>
        {name}
        <Pencil name="action/Edit" size="30" color="#c9e0ef"/>
      </Name>
      {status === 'progress' && <Text type="progress">ukládám...</Text>}
      {status === 'success' && <Text type="success">uloženo</Text>}
      {status === 'failed' && <Text type="danger">chyba</Text>}

      <RenameInput isEdit={isEdit}>
        <input
          onChange={(e) => setValue(e.target.value)}
          value={value}
          ref={inputEl}
          type='text'
          onBlur={renameFile}
          onKeyDown={handleKeyDown} 
        />
      </RenameInput>
    </RenameDiv>
  )
}

export default Rename