import React, { Component } from 'react'
import Link from 'next/link'
import Router from 'next/router'
import fetch from 'isomorphic-unfetch'
import Page from '../comps/Page'
import Markdown from '../comps/Markdown'
import AddDoc from '../comps/AddDoc'
import getUrl from '../util/getUrl'
import getJwt from '../util/getJwt'

class k extends Component {
  delete = async () => {
    const sure = window.confirm(
      'Are you sure you want to delete this doc? This can not be undone.'
    )
    if (!sure) return
    const del = await fetch(getUrl('docs/' + this.props.id), {
      headers: { Authorization: getJwt() },
      method: 'DELETE',
    }).catch(({ message }) => ({ ok: false, message }))
    if (del.ok) Router.push('/')
    else {
      if (!del.message) {
        const data = await del.json()
        del.message = data.message
      }
      window.alert(`Could not delete doc, ${del.message}`)
    }
  }
  render() {
    const { found, id, doc } = this.props
    if (!found)
      return (
        <Page>
          <h3>Doc not found...</h3>
        </Page>
      )
    return (
      <Page>
        <h5 style={{ marginBottom: '1rem' }}>
          {doc.dir}
          {doc.dir.length > 0 ? '/' : ''}
          {doc.name}
          {' - '}
          <Link
            as={getUrl('edit/' + id)}
            href={{ pathname: '/edit', query: { id } }}
          >
            <a id="edit">edit</a>
          </Link>
          <button
            className="float-right"
            onClick={this.delete}
            style={{ margin: '5px 0 0' }}
          >
            Delete
          </button>
        </h5>
        <Markdown source={doc.md} className="Markdown" />
      </Page>
    )
  }
}
export default AddDoc(k)