import React, { useState } from 'react'
import { styled, Element } from '@siteone/system-core'
import { IconButton, Text } from '@siteone/pagebuilder-ui'

const Base = styled(Element)`
  color: #000;
  transition: all 0.4s;
  overflow: hidden;
`

const Input = styled.input`
  width: 100%;
  height: 30px;
  margin-right: 10px;
`

const InputWrapper = styled(Element)`
  padding-left: 24px;
  height: 42px;
  align-items: center;
  display: flex;
  &:hover{
    background: #eaf7ff;
  }
`

const AddFolder = ({ onCreateFolder, selectedCat }) => {
  const [name, setName] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [addFolder, setAddFolder] = useState(false)
  const [status, setStatus] = useState(false)

  /**
   * Create a new folder
   */
  const createFolder = async () => {
    setIsLoading(true)
    try {
      await onCreateFolder({ name, category: selectedCat })
      setStatus('success')
      setName("")
    } catch (e) {
      console.log(e)
      setStatus('failed')
    }
    setIsLoading(false)
    setTimeout(setStatus, 2000)
  }


  return (
    <Base hasValue={name !== ""}>
      {!addFolder && (
        <InputWrapper>
          <IconButton icon="folders/Plus" iconColor="black" color="black" type="button" onClick={() => setAddFolder(true)} />
        </InputWrapper>
      )}
      {addFolder && (
        <React.Fragment>
          <InputWrapper flexDirection="row">
            <Input type="text" value={name} onChange={e => setName(e.target.value)} placeholder="Název nové složky" />
            {name && (
              <IconButton icon="action/Tick" iconColor="black" color="black" type="button" onClick={createFolder} disabled={isLoading} />
            )}
            {!name && (
              <IconButton icon="action/Cross" iconColor="black" color="black" type="button" onClick={() => setAddFolder(false)} disabled={isLoading} />
            )}
          </InputWrapper>
          <Element pl={24}>
            {isLoading && <Text label="ukládám" type="progress" />}
            {status === 'success' && <Text label="uloženo" type="success" />}
            {status === 'failed' && <Text label="chyba" type="danger" />}
          </Element>
        </React.Fragment>
      )}
    </Base>
  )
}

export default AddFolder