import { ModelType, getColumns, produceModel } from '@gadmin2n/react-common';
import { ListButton, Show } from '@refinedev/antd';
import {
  IResourceComponentsProps,
  useShow,
  useTranslate,
} from '@refinedev/core';
import React, { useState } from 'react';
import { getShowField } from '../../helpers';
import type { WorkflowEventOutbox } from '../../generated/types/prisma.types'; //'.prisma/client/index';
import {
  workflowEventOutboxShowConfig as showConfig,
  workflowEventOutboxShowPrismaSelect as showPrismaSelect,
} from '../../generated/props/workflowEventOutbox/config';
import { workflowEventOutboxModel } from '../../generated/props/workflowEventOutbox/model';
import { modelsMap } from 'generated/models.index';
import { agentAttrs } from '../../components/agentPanel/agentAttributes';

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

  const { queryResult } = useShow<WorkflowEventOutbox>({
    meta: { select: showPrismaSelect },
  });
  const { data, isLoading } = queryResult;
  const record = data?.data;

  const [[fields, model]] = useState(() => {
    const model: ModelType = produceModel(workflowEventOutboxModel, {
      // status: { render: xxxxx }
    });

    // getColumns is a function that returns an array of fields
    const fields = getColumns('WorkflowEventOutbox', showConfig.fields, {
      ...modelsMap,
      WorkflowEventOutbox: {
        model,
        meta: modelsMap['WorkflowEventOutbox'].meta,
      },
    });

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

  return (
    <Show
      isLoading={isLoading}
      headerButtons={
        <div
          style={{ display: 'inline-flex', gap: 8 }}
          {...agentAttrs({ type: 'show-header', resource: resourceName })}
        >
          <ListButton />
        </div>
      }
      contentProps={{ styles: { body: { padding: 0 } } }}
    >
      <div
        style={{
          border: '1px solid #f0f0f0',
          borderRadius: 8,
          overflow: 'hidden',
        }}
      >
        {fields.map((field: any) => {
          return getShowField(field, resourceName, record, t, model, modelsMap);
        })}
      </div>
    </Show>
  );
};
