import {
  addValidator,
  FieldDataType,
  handleInitialValues,
  handleOnFinish,
  ModelType,
} from '@gadmin2/react-common';
import { Create, useFileUploadState, useForm } from '@refinedev/antd';
import {
  IResourceComponentsProps,
  useApiUrl,
  useTranslate,
} from '@refinedev/core';
import { Form } from 'antd';
import produce from 'immer';
import React from 'react';
import { modelsEnum, modelsMap } from '../../generated/models.index';
import {
  gameFormConfig as formConfig,
  gameFormPrismaSelect as formPrismaSelect,
} from '../../generated/props/game/config';
import { GameForm as transformClass } from '../../generated/props/game/form.validator';
import { gameModel, useRelation } from '../../generated/props/game/model';
import { Game } from '../../generated/types/prisma.types';
import { getFormItem, onFormValuesChange } from '../../helpers';

const model: ModelType = produce(gameModel, (draft: FieldDataType) => {
  /*
  (draft["description"] || {}).component = <MDEditor data-color-mode="light" />;
  (draft["status"] || {}).normalize = (value: any) => value ? "1" : "0";
  */
});
const fields: FieldDataType[] = formConfig.fields
  .map((fieldName: string) => model[fieldName])
  .filter((field) => field)
  .map((field) => {
    if (field.name === 'id') {
      return field;
    }
    /*
      if(field.name === "run_cron") {
        return produce(field, (draft: any) => {
          draft.validator = {validator: runCronValidator};
        });
      }
      */
    return addValidator(field, transformClass) as unknown as FieldDataType;
  });

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

  const { formProps, saveButtonProps, onFinish, form } = useForm<Game>({
    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>
  );
};
