import { marked } from "marked"
import { type ProjectMetadata } from "../server"

interface ProjectProps {
  project: ProjectMetadata
  readme: string
  files: string[]
}

export function Project({ project, readme, files }: ProjectProps) {
  const name = project.name
  return (
    <>
      <link rel="stylesheet" href="/src/css/project.css" />
      <p><a href="/">« Back</a></p>
      <div class="content-wrapper">
        <div class="main-content">
          <div class="tab-container">
            <input type="radio" id="readme-tab" name="tabs" checked hidden />
            <input type="radio" id="todo-tab" name="tabs" hidden />
            <div class="tab-buttons">
              <label for="readme-tab" class="tab-button">README</label>
              <label for="todo-tab" class="tab-button">TODO</label>
            </div>
            <div class="tab-content readme-content">
              <p dangerouslySetInnerHTML={{ __html: marked.parse(readme) as string }} />
            </div>
            <div class="tab-content">
              <iframe src={`https://todo.theworkshop.cc/todos/${name}`} />
            </div>
          </div>
        </div>
        <div class="side-content">
          <h2>Links</h2>
          <ul class="file-list">
            <li><a href={project.github}>GitHub</a></li>
            {project.url && (
              <li><a href={project.url}>{project.url.replace(`https://`, "")}</a></li>
            )}
          </ul>
          {files.length > 0 && (
            <>
              <h2>Files</h2>
              <ul class="file-list">
                {files.sort().map(file => (
                  <li key={file}>
                    <a href={`/p/${name}/${file}`}>{file}</a>
                    <button
                      type="button"
                      class="delete-button"
                      data-file={file}
                    >×</button>
                  </li>
                ))}
              </ul>
            </>
          )}
          <h2>Upload File</h2>
          <div id="upload-container" class="upload-container">
            <input type="file" id="file-input" class="file-input" />
            <button type="button" id="upload-button" class="upload-button" style="display: none">Upload</button>
            <div id="progress-container" class="progress-container">
              <div id="progress-bar" class="progress-bar"></div>
              <div id="progress-text">0%</div>
            </div>
          </div>
          <div id="drag-overlay" class="drag-overlay">
            <div class="drag-text">DROP FILE HERE</div>
          </div>
        </div>
      </div>
      <script src="/src/js/project.js"></script>
    </>
  )
}