import React, { useEffect, useState } from 'react';
import {
  APIClient,
  APIClientProvider,
  CollectionFieldProvider,
  CollectionProvider,
  compose,
  RecordProvider,
  useCollectionField,
} from '@nocobase/client';
import MockAdapter from 'axios-mock-adapter';

const apiClient = new APIClient();

const mock = new MockAdapter(apiClient.axios);

mock.onGet('/posts/1/tags:list').reply(200, {
  data: [
    { id: 1, name: 'Tag 1' },
    { id: 2, name: 'Tag 2' },
  ],
});

const collection = {
  name: 'posts',
  fields: [
    {
      type: 'belongsToMany',
      name: 'tags',
      targetKey: 'id',
      sourceKey: 'id',
      foreignKey: 'postId',
      otherKey: 'tagId',
    },
  ],
};

const record = { id: 1 };

const providers = [
  // API 客户端
  [APIClientProvider, { apiClient }],
  // 提供当前数据表行记录的上下文
  [RecordProvider, { record }],
  // 提供数据表配置的上下文
  [CollectionProvider, { collection }],
  // 提供字段配置上的下文
  [CollectionFieldProvider, { name: 'tags' }],
];

export default compose(...providers)(() => {
  const { resource } = useCollectionField();
  const [items, setItems] = useState([]);
  useEffect(() => {
    // 请求地址为 /posts/1/tags:list
    resource.list().then((response) => {
      setItems(response?.data?.data);
    });
  }, []);
  return (
    <div>
      {items?.map((item, key) => (
        <div key={key}>{item.name}</div>
      ))}
    </div>
  );
});