import { t as i18nT } from "i18next";
import { Link } from "react-router";

interface Props {
  items: { name: string; title: string; type?: ModelPropertyType; customType?: { name: string; route?: string }; description?: string; required: boolean }[];
}
export enum ModelPropertyType {
  String,
  DateTime,
  Int,
  Decimal,
  Boolean,
  UUID,
  Cuid,
}

export default function DocPropertiesTable({ items }: Props) {
  return (
    <div className="not-prose flex flex-col">
      <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
        <div className="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
          <div className="overflow-hidden shadow-xs ring-1 ring-black ring-opacity-5 md:rounded-lg">
            <table className="min-w-full divide-y divide-gray-300">
              <thead className="bg-surface-neutral-secondary">
                <tr>
                  <th scope="col" className="text-text-neutral-primary px-2 py-1.5 text-left text-sm font-semibold sm:pl-6">
                    {i18nT("components.docs.properties.name")}
                  </th>
                  <th scope="col" className="text-text-neutral-primary px-2 py-1.5 text-left text-sm font-semibold">
                    {i18nT("components.docs.properties.title")}
                  </th>
                  <th scope="col" className="text-text-neutral-primary px-2 py-1.5 text-left text-sm font-semibold">
                    {i18nT("components.docs.properties.type")}
                  </th>
                  <th scope="col" className="text-text-neutral-primary w-full px-2 py-1.5 text-left text-sm font-semibold">
                    {i18nT("components.docs.properties.description")}
                  </th>
                </tr>
              </thead>
              <tbody className="divide-border bg-surface-neutral-primary divide-y">
                {items.map((item) => (
                  <tr key={item.name}>
                    <td className="text-text-neutral-primary whitespace-nowrap px-2 py-1.5 text-sm font-medium sm:pl-6">
                      {item.name} {item.required && <span className="ml-1 text-red-500">*</span>}
                    </td>
                    <td className="text-text-neutral-tertiary whitespace-nowrap px-2 py-1.5 text-sm">{item.title}</td>
                    <td className="text-text-neutral-tertiary whitespace-nowrap px-2 py-1.5 text-sm">
                      {item.customType && (
                        <span className="font-bold">
                          {item.customType.route ? (
                            <Link className="text-theme-600 underline" to={item.customType.route}>
                              {item.customType.name}
                            </Link>
                          ) : (
                            item.customType.name
                          )}
                        </span>
                      )}
                      {item.type !== undefined && ModelPropertyType[item.type]}
                    </td>
                    <td className="text-text-neutral-tertiary whitespace-nowrap px-2 py-1.5 text-sm">{item.description}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}