import {
  FieldDataType,
  handleInitialValues,
  handleOnFinish,
  ModelType,
  produceModel,
} from '@gadmin2n/react-common';
import { Create, useFileUploadState, useForm } from '@refinedev/antd';
import { Form } from 'antd';
import {
  IResourceComponentsProps,
  useApiUrl,
  useTranslate,
} from '@refinedev/core';
import React, { useContext, useState } from 'react';
import { getFormItem, onFormValuesChange } from '../../helpers';
import { modelsMap, modelsEnum } from '../../generated/models.index';
import {
  agendaJobFormConfig as formConfig,
  agendaJobFormPrismaSelect as formPrismaSelect,
} from '../../generated/props/agendaJob/config';
import {
  agendaJobModel,
  useRelation,
} from '../../generated/props/agendaJob/model';
import { AgendaJob } from '../../generated/types/prisma.types';
import { AgendaJobForm as transformClass } from '../../generated/props/agendaJob/form.validator';
import { BusinessContext } from 'components/contexts/business';

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

  const [[fields, model]] = useState(() => {
    const model: ModelType = produceModel(
      agendaJobModel,
      {
        // 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<AgendaJob>({
    meta: { select: formPrismaSelect },
  });
  if (formProps.initialValues || formConfig.initialValues) {
    formProps.initialValues = handleInitialValues(
      formProps.initialValues || formConfig.initialValues || {},
      fields,
    );
  }

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

  return (
    <Create
      saveButtonProps={{
        ...saveButtonProps,
        disabled: isLoading,
      }}
    >
      <Form
        {...formProps}
        validateTrigger="onBlur"
        onFinish={(values) => {
          onFinish(
            handleOnFinish(
              {
                ...values,
              },
              fields,
            ),
          );
        }}
        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>
    </Create>
  );
};
