"use client";

import { FC } from "react";
import { useFormState } from "react-dom";
import { Grid } from "@mui/material";
import { TextField, Select, MultiValueField } from "ui";
import { Create as InternalCreate } from "@/app/_components/Create";
import { generateCreateAction } from "@/app/_lib/actions";
import { serviceConfig } from "@/app/_config/config";
import { FieldDescription } from "@/app/_lib/service";

type CreateProps = {
  service: string;
};

export const Create: FC<CreateProps> = ({ service }) => {
  const {
    [service]: { entity, table, displayName, createFields },
  } = serviceConfig;
  const fields = createFields.map((field: any) => {
    const copy = { ...field };
    Object.keys(copy).forEach((key: any) => {
      if (typeof copy[key] === "function") {
        delete copy[key];
      }
    });
    return copy;
  });

  const createAction = generateCreateAction({ entity, table, fields });
  const initialState = {
    message: null,
    errors: {},
    values: fields.reduce(
      (acc: Record<string, any>, field: FieldDescription) => {
        acc[field.name] = field.defaultValue;
        return acc;
      },
      {},
    ),
  };
  const [formState, formAction] = useFormState(createAction, initialState);

  return (
    <InternalCreate
      title={`Create ${displayName}`}
      entity={entity}
      formAction={formAction}
      formState={formState}
    >
      <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
        {createFields.map(
          (field) =>
            !field.hidden && (
              <Grid key={field.name} item xs={field.size ?? 6}>
                {field.kind === "select" && (
                  <Select
                    name={field.name}
                    label={field.label}
                    required={field.required ?? false}
                    formState={formState}
                    getOptions={field.getOptions}
                  />
                )}
                {field.kind === "multi" && (
                  <MultiValueField
                    name={field.name}
                    label={field.label}
                    formState={formState}
                    helperText={field.helperText}
                  />
                )}
                {(!field.kind || field.kind === "text") && (
                  <TextField
                    name={field.name}
                    label={field.label}
                    lines={field.lines ?? 1}
                    required={field.required ?? false}
                    formState={formState}
                    helperText={field.helperText}
                  />
                )}
              </Grid>
            ),
        )}
      </Grid>
    </InternalCreate>
  );
};