import { ModelType, getColumns, produceModel } from '@gadmin2n/react-common';
import {
  CloneButton,
  DeleteButton,
  EditButton,
  ListButton,
  RefreshButton,
  Show,
} from '@refinedev/antd';
import {
  IResourceComponentsProps,
  useShow,
  useTranslate,
} from '@refinedev/core';
import React, { useState } from 'react';
import { getShowField } from '../../helpers';
import type { Game } from '../../generated/types/prisma.types'; //'.prisma/client/index';
import {
  gameShowConfig as showConfig,
  gameShowPrismaSelect as showPrismaSelect,
} from '../../generated/props/game/config';
import { gameModel } from '../../generated/props/game/model';
import { modelsMap } from 'generated/models.index';
import { agentAttrs } from '../../components/agentPanel/agentAttributes';

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

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

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

    // getColumns is a function that returns an array of fields
    const fields = getColumns('Game', showConfig.fields, {
      ...modelsMap,
      Game: { model, meta: modelsMap['Game'].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 />
          <EditButton recordItemId={record?.id} />
          <CloneButton recordItemId={record?.id} />
          <DeleteButton recordItemId={record?.id} />
          <RefreshButton
            recordItemId={record?.id}
            meta={{ select: showPrismaSelect }}
          />
        </div>
      }
    >
      {fields.map((field: any) => {
        return getShowField(field, resourceName, record, t, model, modelsMap);
      })}
    </Show>
  );
};
