import ReactMarkdown from 'react-markdown';
import { GetServerSideProps } from "next";
import Head from "next/head";
import Link from "next/link";

import { formatCurrency } from "~/lib/currency/formatter";

import { prisma } from "~/server/db";
import { Training } from "lib/content/training";
import { Layout } from "~/components/Layout";
// import { Button } from "~/components/Button";

export const getServerSideProps: GetServerSideProps = async (context) => {
  const trainingSlug = context.query.slug as string;
  const training = await prisma.training.findUnique({ where: { slug: trainingSlug }});

  if (!training) return { notFound: true };

  return { props: { training: training } };
}

function Detail({ training }: { training: any }) {
  return (
    <div className="overflow-hidden bg-white shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
      <div className="px-4 py-6 sm:px-6">
        <h3 className="text-base font-semibold leading-7 text-gray-900">Training</h3>
        {/* <p className="mt-1 max-w-2xl text-sm leading-6 text-gray-500">Personal details and application.</p> */}
      </div>
      <div className="border-t border-gray-100">
        <dl className="divide-y divide-gray-100">
          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt className="text-sm font-medium text-gray-900">backoffice ID</dt>
            <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"><code>{training.id}</code></dd>
          </div>
          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt className="text-sm font-medium text-gray-900">Name</dt>
            <dd className="mt-1 text-sm leading-6 font-medium text-gray-900 sm:col-span-2 sm:mt-0">{training.name}</dd>
          </div>
          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt className="text-sm font-medium text-gray-900">Days</dt>
            <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{training.days}</dd>
          </div>
          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt className="text-sm font-medium text-gray-900">Draft</dt>
            <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{training.draft ? 'Yes' : 'No'}</dd>
          </div>
          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt className="text-sm font-medium text-gray-900">Logo</dt>
            <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">{training.logoURL}</dd>
          </div>
          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt className="text-sm font-medium text-gray-900">Repository</dt>
            <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"><Link href={training.repositoryURL} className="text-black underline">{training.repositoryURL}</Link></dd>
          </div>
          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
            <dt className="text-sm font-medium text-gray-900">Price</dt>
            <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">Open:&nbsp;{formatCurrency(training.priceOpen)}, Corporate:&nbsp;{formatCurrency(training.priceCorporate)}</dd>
          </div>
          {/* <div className="px-4 py-6 sm:grid sm:grid-cols-2 sm:gap-4 sm:px-6">
            <dt className="text-sm font-medium text-gray-900">Content</dt>
            <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-1 sm:mt-0">
              <div className="prose prose:text-black prose-p:text-slate-700 prose-h1:text-2xl prose-h1:font-medium prose-h2:text-xl prose-h2:font-medium prose-h3:text-lg prose-h3:font-medium prose-li:my-0">
                <ReactMarkdown>
                  {training.content}
                </ReactMarkdown>
              </div>
            </dd>
          </div> */}
          <div className="mx-auto px-4 py-6 sm:gap-4 sm:px-6 prose prose:text-black prose-p:text-slate-700 prose-h1:text-2xl prose-h1:font-medium prose-h2:text-xl prose-h2:font-medium prose-h3:text-lg prose-h3:font-medium prose-li:my-0">
            <ReactMarkdown>
              {training.content}
            </ReactMarkdown>
          </div>
        </dl>
      </div>
    </div>
  )
}

export default function Training({ training }: { training: Training }) {
  return (
    <>
      <Head>
        <title>Training | MaresHQ backoffice</title>
      </Head>
      <Layout>
        {/* { JSON.stringify(trainings) } */}
        <Detail training={training} />
      </Layout>
    </>
  );
}