import React from 'react'
import AniLink from 'gatsby-plugin-transition-link/AniLink'
import { ToastContainer, toast } from 'react-toastify'

import Seo from '../components/seo'
import axios from '../axios'

import '../css/url.sass'
import '../css/notifications.sass'

const DeleteURLPage = () => {
  const [url, setURL] = React.useState('')

  const handleKeypress = e => {
    if (e.charCode === 13 || e.keyCode === 13) {
      deleteURL()
    }
  }

  const changeURLHandler = event => {
    const value = event.target.value
    setURL(value)
  }

  const deleteURL = async () => {
    setURL('')

    if (url === '') {
      return toast.warn('Empty input')
    }

    toast.promise(
      axios.delete(`?url=${url}`),
      {
        pending: 'Sending request',
        success: {
          render({ data }) {
            return `Deleted ${data.url}!`
          }
        },
        error: {
          render(err){
            let e = ''

            console.log(err)
  
            if (err.response && err.response.data.message) {
              e = err.response.data.message
            } else {
              e = err.toString()
            }
  
            return `${e}`
          }
        }
      }
    )
  }

  return (
    <>
      <Seo
        title="Delete URL"
      />

      <ToastContainer 
        theme="dark"
      />

      <div className="field">
        <input
          type="url"
          name="url"
          inputMode="url"
          className="input"
          placeholder="URL"
          value={url}
          onChange={changeURLHandler}
          onKeyPress={handleKeypress} />
      </div>

      <button
        className="red-button"
        onClick={() => deleteURL()}
      >Delete URL</button>

      <br />

      <AniLink cover to="/">
        <button className="blue-button">Go to home page</button>
      </AniLink>
    </>
  )
}

export default DeleteURLPage