import { useParams } from 'react-router-dom'
import { useEffect, useState } from 'react'
import axios from 'axios'


const WikiEditPage = () => {
  const { name } = useParams<{ name: string }> ()

  const [html, setHtml] = useState('')
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const link = document.createElement('link')
    link.rel = 'stylesheet'
    link.href = '/wiki/custom.css'  // Gollum の静的 CSS にアクセスできるようにしとく
    document.head.appendChild(link)
    return () => {
      document.head.removeChild(link)
    }
  }, [])

  useEffect(() => {
    setLoading(true)
    axios
      .get(`/api/wiki/edit/${encodeURIComponent(name)}`, {
        headers: { 'X-Transfer-Code': localStorage.getItem('user_code') || '' }
      })
      .then((res) => setHtml(res.data))
      .finally(() => setLoading(false))
  }, [name])

  return loading ? (
    <p>読み込み中...</p>
  ) : (
    <div dangerouslySetInnerHTML={{ __html: html }} />
  )
}


export default WikiEditPage