import React from "react"
import AniLink from "gatsby-plugin-transition-link/AniLink"
import { NotificationManager, NotificationContainer } from 'react-notifications'
import 'react-notifications/lib/notifications.css'

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

import "../css/base.css"
import "../css/url.css"

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

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

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

    if (url === '') {
      return NotificationManager.error('Empty')
    }

    try {
      const id = btoa(url)

      console.log(`/url/${id}`)

      const res = await axios.delete(`/url/${id}`)

      const data = res.data

      NotificationManager.success(data.url, 'Deleted')
    } catch (err) {
      let e = ''

      if (err.response && err.response.data.message) {
        e = err.response.data.message
      } else {
        e = err.toString()
      }

      NotificationManager.error(e)
    }
  }

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

      <NotificationContainer />

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

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

      <br />

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

export default DeleteURLPage