import {
  FieldDataType,
  handleInitialValues,
  handleOnFinish,
  ModelType,
  produceModel,
} from '@gadmin2n/react-common';
import {
  Edit,
  ListButton,
  RefreshButton,
  useFileUploadState,
  useForm,
} from '@refinedev/antd';
import { Form } from 'antd';
import {
  IResourceComponentsProps,
  useApiUrl,
  useParsed,
  useTranslate,
} from '@refinedev/core';
import { getFormItem, onFormValuesChange } from '../../helpers';
import React, { useContext, useState } from 'react';

import { modelsMap, modelsEnum } from '../../generated/models.index';
import {
  workflowEventOutboxFormConfig as formConfig,
  workflowEventOutboxFormPrismaSelect as formPrismaSelect,
} from '../../generated/props/workflowEventOutbox/config';
import {
  workflowEventOutboxModel,
  useRelation,
} from '../../generated/props/workflowEventOutbox/model';
import { WorkflowEventOutbox } from '../../generated/types/prisma.types';
import { WorkflowEventOutboxForm as transformClass } from '../../generated/props/workflowEventOutbox/form.validator';
import { BusinessContext } from 'components/contexts/business';

export const WorkflowEventOutboxEdit: React.FC<
  IResourceComponentsProps
> = () => {
  const resourceName = 'workflowEventOutbox';
  const t = useTranslate();

  const [[fields, model]] = useState(() => {
    const model: ModelType = produceModel(
      workflowEventOutboxModel,
      {
        // all formItem attrs surport, https://ant.design/components/form#formitem
        // description : { component : <MDEditor data-color-mode="light" /> },
        // status : { normalize : (value: any) => value ? "1" : "0" },
        // cron: {validator: { validator: runCronValidator },},
      },
      transformClass,
    );

    const fields: FieldDataType[] = formConfig.fields
      .map((fieldName: string) => model[fieldName])
      .filter((field: FieldDataType) => field);

    return [fields, model] as const;
  });

  const { formProps, saveButtonProps, onFinish, form } =
    useForm<WorkflowEventOutbox>({
      meta: { select: formPrismaSelect },
    });
  formProps.initialValues = handleInitialValues(
    formProps.initialValues || {},
    fields,
  );

  const apiUrl = useApiUrl();
  const { isLoading, onChange } = useFileUploadState();

  const relationSelectProps = useRelation(modelsMap);

  return (
    <Edit
      saveButtonProps={{
        ...saveButtonProps,
        disabled: isLoading,
      }}
      headerButtons={
        <>
          <ListButton />
          <RefreshButton meta={{ select: formPrismaSelect }} />
        </>
      }
    >
      <Form
        {...formProps}
        validateTrigger="onBlur"
        onFinish={(values) => {
          onFinish(
            handleOnFinish(
              {
                ...values,

                id: undefined,
              },
              fields,
              'edit',
            ),
          );
        }}
        layout="vertical"
        form={form}
        onValuesChange={onFormValuesChange(form, formConfig.reaction)}
      >
        {fields.map((field) => {
          return getFormItem(
            field,
            resourceName,
            t,
            form,
            formConfig.reaction,
            modelsEnum,
            model,
            apiUrl,
            relationSelectProps,
            onChange,
          );
        })}
      </Form>
    </Edit>
  );
};
