import { Link, Modal, useModal } from "@geist-ui/core";
import { Post } from "@lib/types";
import Cookies from "js-cookie";
import useSWR from "swr";
import { adminFetcher } from ".";
import styles from './admin.module.css'

const PostModal = ({ id }: {
  id: string,
}) => {
  const { visible, setVisible, bindings } = useModal()
  const { data: post, error } = useSWR<Post>(`/server-api/admin/post/${id}`, adminFetcher)
  if (error) return <Modal>failed to load</Modal>
  if (!post) return <Modal>loading...</Modal>

  const deletePost = async () => {
    await fetch(`/server-api/admin/post/${id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${Cookies.get("drift-token")}`,
      }
    })
    setVisible(false)
  }

  return (
    <>
      <Link href="#" color onClick={() => setVisible(true)}>{post.title}</Link>
      <Modal width={'var(--main-content)'} {...bindings}>
        <Modal.Title>{post.title}</Modal.Title>
        <Modal.Subtitle>Click an item to expand</Modal.Subtitle>
        {post.files.map((file) => (
          <div key={file.id} className={styles.postModal}>
            <Modal.Content>
              <details>
                <summary>{file.title}</summary>
                <div dangerouslySetInnerHTML={{ __html: file.html }}>
                </div>
              </details>
            </Modal.Content>
          </div>
        )
        )}
        <Modal.Action type="warning" onClick={deletePost}>Delete</Modal.Action>
        <Modal.Action passive onClick={() => setVisible(false)}>Close</Modal.Action>
      </Modal>
    </>)
}

export default PostModal