export default defineComponent({
  setup() {
    // Create a controller that handles the component state and its entries
    const controller = TFetchEntriesController.create<Person>({
      // This callback is triggered every time the 'fetch' method is called
      onFetch: async () => {
        const response = await fetchFromServer();
        return { entries: response };
      },
      // Build the entry component and style it anyway you like
      entryBuilder: ({ entry, index, isFirst, isLast, isOdd, isEven }) => {
        return (
          <TText color="primary">
            {entry.first} {entry.last}
          </TText>
        );
      },
      // An optional component that can be prepended to the entry component
      entryPrependBuilder: ({ index }) => {
        return <TText size="sm">Item {index + 1}</TText>;
      },
      // An optional component that can be appended to the entry component
      entryAppendBuilder: ({ isLast }) => {
        if (isLast) {
          return (
            <TButton design="flat" loading={controller.state.value === "loading"} onClick={onClick} centered block mt>
              Load More
            </TButton>
          );
        }
        return <TDivider my="sm" />;
      },
    });

    const onClick = async () => {
      // Use class methods to fetch more entries
      await controller.fetch();

      // Or manually mutate the component state to add or remove entries
      // controller.addAt(2, []);
      // controller.removeAt(2, 1);
    };

    return () => <TFetchEntries controller={controller} />;
  },
});