import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:trade_app/models/photo_model.dart';

part 'item_model.freezed.dart';

part 'item_model.g.dart';

@freezed
class Item with _$Item {
  @JsonSerializable(fieldRename: FieldRename.snake)
  const factory Item({
    @Default("") String id,
    @Default("") String seller,
    @Default("") String receivableCampus,
    @Default([Photo(order: 1, photoPath: "")]) List<Photo> images,
    @Default(false) bool isLikedByCurrentUser,
    @Default("") String listingStatus,
    @Default(0) int price,
    @Default("") String name,
    @Default("") String description,
    @Default("") String condition,
    @Default("") String writingState,
    DateTime? createdAt,
    DateTime? updatedAt,
    @Default("") String buyer,
  }) = _Item;

  factory Item.fromJson(Map<String, dynamic> json) => _$ItemFromJson(json);
}

item_model.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:trade_app/component/grid_view_component.dart';
import 'package:trade_app/component/on_going_bottom.dart';
import 'package:trade_app/config/user_data_provider.dart';
import 'package:trade_app/models/item_model.dart';
import 'package:trade_app/views/error/network_error_view.dart';
import 'package:trade_app/views/top/item_grid_view_model.dart';

class ItemGridView extends ConsumerStatefulWidget {
  const ItemGridView({
    required this.provider,
    super.key,
  });

  final StateNotifierProvider<ItemsNotifier, AsyncValue<List<Item>>> provider;

  @override
  ConsumerState createState() => _ItemGridViewState();
}

class _ItemGridViewState extends ConsumerState<ItemGridView> {

  @override
  void initState() {
    ref.read(widget.provider.notifier).fetch();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final AsyncValue<List<Item>> asyncValue = ref.watch(widget.provider);
    final userData = ref.read(userDataProvider);
    return NotificationListener<ScrollEndNotification>(
      child: Scrollbar(
        child: CustomScrollView(
          primary: false,
          restorationId: 'articles',
          physics: const AlwaysScrollableScrollPhysics(),
          slivers: <Widget>[
            CupertinoSliverRefreshControl(
              onRefresh: () async {
                ref.read(widget.provider.notifier).refresh();
              },
            ),
            asyncValue.when(
              data: (items) {
                return GridViewComponent(items: items, userData: userData);
              },
              error: (error, stacktrace) {
                if (asyncValue.hasValue) {
                  return GridViewComponent(items: asyncValue.value!, userData: userData,);
                }
                debugPrint(error.toString());
                return SliverToBoxAdapter(
                  child: NetworkErrorView(onRetry: () {
                    ref.read(userDataProvider.notifier).refreshAccessToken();
                    ref.read(widget.provider.notifier).refresh();
                  }),
                );
              },
              loading: () => const SliverToBoxAdapter(
                  child: Center(child: CupertinoActivityIndicator())),
            ),
            OnGoingBottom(
              asyncValue: asyncValue,
            ),
          ],
        ),
      ),
      onNotification: (notification) {
        // 一番下までスクロールしたとき
        if (notification.metrics.extentAfter == 0) {
          // 追加でローディング
          ref.read(widget.provider.notifier).loadMore();
          return true;
        }
        return false;
      },
    );
  }
}

item_grid_view.dart

import 'package:flutter/material.dart';
import 'package:trade_app/models/item_model.dart';
import 'package:trade_app/models/user_data_model.dart';
import 'package:trade_app/views/item_detail/item_detail_view.dart';
import 'package:trade_app/views/top/item_card.dart';

class GridViewComponent extends StatelessWidget {
  const GridViewComponent({Key? key, required this.items, required this.userData}) : super(key: key);
  final List<Item> items;
  final UserData userData;

  @override
  Widget build(BuildContext context) {
    if (items.isEmpty) {
      return const SliverToBoxAdapter(
        child: Center(
          child: Text('検索結果は0件です。'),
        ),
      );
    } else {
      return SliverGrid(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
        ),
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return ItemCard(
              item: items[index],
              userData: userData,
              navigate: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => ItemDetailView(items[index], userData),
                  ),
                );
              },
            );
          },
          childCount: items.length,
        ),
      );
    }
  }
}

grid_view_component.dart

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:trade_app/constant/url.dart';
import 'package:trade_app/models/item_model.dart';
import 'package:trade_app/repository/item_repository.dart';

//商品全体
final itemsProvider =
    StateNotifierProvider<ItemsNotifier, AsyncValue<List<Item>>>((ref) {
  return ItemsNotifier(ref.read(itemRepositoryProvider), '${Url.apiUrl}items/');
});

final itemRepositoryProvider = Provider<ItemRepository>((ref) {
  return ItemRepository();
});

//〇〇商品一覧データを管理する雛形
class ItemsNotifier extends StateNotifier<AsyncValue<List<Item>>> {
  ItemsNotifier(this._repository, this.apiUrl)
      : super(const AsyncLoading<List<Item>>()) {
    // Providerが初めて呼び出されたときに実行
    fetch();
  }

  final String apiUrl;

  int page = 1;
  String name = '';
  bool isShowSoldItem = false;

  final ItemRepository _repository;

  void changeName(String str) {
    page = 1;
    name = str;
  }

  Future<void> fetch({
    bool isLoadMore = false,
  }) async {
    final url =
        isShowSoldItem ? "$apiUrl?purchased=true" : "$apiUrl?purchased=false";
    state = await AsyncValue.guard(() async {
      final items = await _repository.fetchItems(name, page, url);
      return [if (isLoadMore) ...state.value ?? [], ...items];
    });
  }

  void loadMore() {
    // ローディング中にローディングしないようにする
    if (state == const AsyncLoading<List<Item>>().copyWithPrevious(state)) {
      return;
    }
    // 取得済みのデータを保持しながら状態をローディング中にする
    state = const AsyncLoading<List<Item>>().copyWithPrevious(state);
    page++;
    fetch(isLoadMore: true);
  }

// 取得済みのデータを保持しながら状態をローディング中にする
  void refresh() {
    state = const AsyncLoading<List<Item>>().copyWithPrevious(state);
    page = 1;
    fetch();
  }

  //購入済み商品を表示するかどうかを返すgetter
  bool getIsShowSoldItem() => isShowSoldItem;

  //購入済み商品を表示するかどうかを切り替えるsetter
  //切り替えた後再読み込み
  void setIsShowSoldItem(bool isShow) async {
    isShowSoldItem = isShow;
    page = 1;
    fetch();
  }

//いいねのon/off
  void toggleLike(String id, bool isLike) {
    if (state.value != null) {
      final targetItemIndex =
          state.value!.indexWhere((element) => element.id == id);
      if (targetItemIndex >= 0) {
        state.value![targetItemIndex] = state.value![targetItemIndex]
            .copyWith(isLikedByCurrentUser: isLike);
      }
    }
  }
}

item_grid_view_model.dart

import 'dart:io';

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:trade_app/constant/url.dart';
import 'package:trade_app/models/item_model.dart';
import 'package:trade_app/repository/other_repository.dart';

class ItemRepository {
  static Future<void> patchItemData(String itemId, String endPoint) async {
    var dio = Dio();
    dio.interceptors.add(LogInterceptor());
    dio = await OtherRepository.addCookie(dio);
    try {
      await dio.put('${Url.apiUrl}items/$itemId/$endPoint/');
    } catch (e) {
      throw Exception(e);
    }
  }

//商品一覧データを取得
  Future<List<Item>> fetchItems(String name, int page, String url) async {
    var dio = Dio();
    dio = await OtherRepository.addCookie(dio);
    dio.interceptors.add(LogInterceptor());
    try {
      final response = await dio.get(
        url,
        queryParameters: {
          "name": name,
          "page": page,
        },
      );
      Map<String, dynamic> jsonData = response.data;
      debugPrint(response.data.toString());
      debugPrint(jsonData.toString());
      return (jsonData['results'] as List)
          .map((itemData) => Item.fromJson(itemData as Map<String, dynamic>))
          .toList();
    } catch (e) {
      if ((e is DioException) && e.response!.statusCode == 404) {
        return [];
      }
      throw Exception(e);
    }
  }
//出品
  static Future<void> exhibitItem(
      Map<String, dynamic> itemData, List<File> imageFiles) async {
    var dio = Dio();
    dio.interceptors.add(LogInterceptor());
    const url = '${Url.apiUrl}items/create/';
    Map<String, dynamic> imageData = {};
    dio = await OtherRepository.addCookie(dio);
    int i = 1;
    for (var img in imageFiles) {
      imageData.addAll({'image_$i': MultipartFile.fromFileSync(img.path)});
      i++;
    }
    final formData = FormData.fromMap({
      ...itemData,
      ...imageData,
    });
    try {
     await dio.post(url, data: formData);
    } catch (e) {
      throw Exception(e);
    }
  }
}

item_repository.dart