"use client";

import { FC, useEffect, useState } from "react";
import { useFormState } from "react-dom";
import { Grid } from "@mui/material";
import { useRouter } from "next/navigation";
import { TextField, Dialog, Button, Select, MultiValueField } from "ui";
import { Selectable } from "kysely";
import { type Database } from "bridge-common";
import { generateUpdateAction } from "../lib/actions";
import { serviceConfig } from "../config/config";
import { FieldDescription } from "../lib/service";
import { getBasePath } from "../lib/frontendUtils";

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

export const Edit: FC<EditProps> = ({ service, row }) => {
  const {
    [service]: { entity, table, displayName, updateFields },
  } = serviceConfig;
  const fields = updateFields.map((field: any) => {
    const copy = { ...field };
    Object.keys(copy).forEach((key: any) => {
      if (typeof copy[key] === "function") {
        delete copy[key];
      }
    });
    return copy;
  });
  const updateFieldNames = fields.map((val: FieldDescription) => val.name);
  const updateAction = generateUpdateAction({ entity, table, fields });
  const updateValues = Object.fromEntries(
    Object.entries(row).filter(([key]) => updateFieldNames.includes(key)),
  );
  updateValues.id = row.id;
  const initialState = {
    message: null,
    errors: {},
    values: updateValues,
  };
  const [formState, formAction] = useFormState(updateAction, initialState);
  const router = useRouter();
  const [liveFormState, setLiveFormState] = useState(formState);
  const updateFormState = (field: string, value: any) => {
    const newState = { ...liveFormState };
    newState.values[field] = value;
    setLiveFormState(newState);
  };

  useEffect(() => {
    if (formState.success) {
      router.push(`${getBasePath()}${entity}`);
    }
  }, [formState.success, router, entity]);

  return (
    <Dialog
      open
      title={`Edit ${displayName}`}
      formAction={formAction}
      onClose={() => router.push(`${getBasePath()}${entity}`)}
      buttons={
        <Grid container justifyContent="space-between">
          <Grid item>
            <Button
              text="Cancel"
              kind="secondary"
              onClick={() => router.push(`${getBasePath()}${entity}`)}
            />
          </Grid>
          <Grid item>
            <Button text="Save" kind="primary" type="submit" />
          </Grid>
        </Grid>
      }
    >
      <Grid container direction="row" rowSpacing={3} columnSpacing={2}>
        {updateFields.map((field: FieldDescription) => (
          <Grid key={field.name} item xs={field.size ?? 6}>
            {field.kind === "select" && (
              <Select
                name={field.name}
                label={field.label}
                required={field.required ?? false}
                formState={liveFormState}
                getOptions={field.getOptions}
                updateFormState={updateFormState}
              />
            )}
            {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>
    </Dialog>
  );
};