"use client";

import { FC } from "react";
import { Grid } from "@mui/material";
import { DisplayTextField } from "ui";
import { Selectable } from "kysely";
import { Database } from "@/app/_lib/database";
import { Detail as InternalDetail } from "@/app/_components/Detail";
import { generateDeleteAction } from "@/app/_lib/actions";
import { serviceConfig } from "@/app/_config/config";

type DetailProps = {
  service: string;
  row: Selectable<keyof Database>;
};

export const Detail: FC<DetailProps> = ({ service, row }) => {
  const {
    [service]: { entity, table, displayName, displayFields: fields },
  } = serviceConfig;
  const deleteAction = generateDeleteAction({ entity, table });

  return (
    <InternalDetail
      title={`${displayName}: ${row.name}`}
      entity={entity}
      id={row.id as string}
      deleteAction={deleteAction}
    >
      <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
        {fields.map((field) => (
          <Grid item xs={field.size ?? 6} key={field.name}>
            <DisplayTextField
              name={field.name}
              label={field.label}
              lines={field.lines ?? 1}
              value={row[field.name] as string}
              copyable={field.copyable ?? false}
            />
          </Grid>
        ))}
      </Grid>
    </InternalDetail>
  );
};