// 뷰모델을 사용하지 않는 기존 개발 방식
// func1 기능 정의가 복잡 → 데이터를 받아와 화면을 업데이트하고 에러가 발생하면 창 닫기
// func1 결과는 어떻게 테스트하지?
func1() {
  // 데이터 받아오기
  final data = await requestArticle();

  // 화면 반영
  view.updateTitle(data.title);
  view.updateText(data.text);

  // 에러가 있다면 현재 화면 닫기
  if (data.hasError) {
    Navigator.pop();
  }
}

// 뷰모델을 사용하는 경우
// func1 기능 정의가 명확 → 외부에서 데이터를 받아와 내부에 저장
// 함수 호출 전/후 데이터를 비교해 기능 테스트 실시
func2() {
  // 외부에서 데이터 받아와 내부에 저장
  this.data = await requestArticle();

  // 에러 시 이벤트 발행
  if (data.hasError) {
    emit(HasError());
  }
}

class ListViewModel {
  ListViewModel() {
    // clickCount는 화면 간 공유하므로 서비스에 선언해 놓고 참조
    LocalService.instance.clickCount.listen((value) {
      clickCount = value;
      onUpdated();
    });
  }
 
 
 
  // ==============================================
  // 뷰에 반영될 상태를 내부 변수로 선언
  // ==============================================
 
  // 리스트 로딩 중
  bool listLoading = false;
 
  // add/delete request 진행 중
  bool loading = false;
 
  // 화면에 표시되는 clickCount
  int clickCount = 0;
 
  // 화면에 표시되는 list
  List<Article> list = [];
 
 
 
  // ==============================================
  // 뷰 통지를 위한 콜백 함수
  // ==============================================
 
  // 위젯에 전달하는 콜백
  void Function() onUpdated = () {};
  void Function(String) onAlert = (msg) {};
 
 
 
  // ==============================================
  // 액션이 발생하면 내부 상태를 바꾸고 뷰에 통지
  // ==============================================
 
  // 외부에서 list 받아오기
  reloadList() async {
    listLoading = true; // 1. 로딩 상태로 바꾸고
    onUpdated();
    list = await RemoteService.instance.getArticleList(); // 2. 데이터를 채우고
    listLoading = false;
    onUpdated(); // 3. 화면을 갱신
  }
 
  // 체크된 리스트 아이템 삭제하기
  removeChecked() async {
    loading = true; // 로딩 상태로 바꾸고
    onUpdated();
    final result = await RemoteService.instance.remove(list.checked); // request
    if (result) {
      list = await RemoteService.instance.getArticleList();
      loading = false;
      onUpdated();
      onAlert('SUCCESS'); // success
    } else {
      loading = false;
      onUpdated();
      onAlert('ERROR'); // error
    }
  }
 
  // 리스트 아이템 체크 상태 변경
  toggleCheck(Article article) {
    article.checked = !article.checked;
    onUpdated();
  }
 
 
  // clickCount 증가
  addClickCount() {
    // clickCount는 화면 간 공유하므로 서비스 내 변수 참조
    LocalService.instance.addClickCount();
  }
}

class ListPageState extends State<ListPage> {
  ListViewModel vm = ListViewModel();
 
  @override
  void initState() {
    super.initState();
    // 뷰모델을 listen
    vm.onUpdated = () => setState(() {});
    vm.onAlert = (msg) => context.showAlert(msg);
  }
 
  @override
  Widget build(BuildContext context) {
    return Frame(
      layer: vm.loading ? LoadingView() : null, // View ← ViewModel.State
      children: [
        // -------- UI counter --------
        CounterButton(
          text: Text('CLICK COUNT : ${vm.clickCount}'), // View ← ViewModel.State
          onTapCount: () => vm.addClickCount(), // 뷰모델의 액션 실행
          onTapOpen: () => context.pushCountView(),
        ),
 
        // -------- UI remove button --------
        RemoveButton(
          text: Text('REMOVE : ${vm.list.checkedCount}'), // View ← ViewModel.State
          onPressed: () => vm.removeChecked(), // 뷰모델의 액션 실행
        ),
 
        // -------- UI list --------
        ArticleListView(
          layer: vm.listLoading ? ListLoadingView() : null,
          itemBuilder: (context, index) {
            return ListItem(
              article: vm.list[index], // View ← ViewModel.State
              onTap: () => vm.toggleCheck(vm.list[index]), // 뷰모델의 액션 실행
            );
          },
        ),
      ],
    ); // Frame
  }
}

// ==============================================
// 서비스
// ==============================================
 
// 서비스는 모두 GetxService를 상속해야 함
class LocalService extends GetxService {
  ...
 
 
// 서비스 등록
Get.put(LocalService());
...
 
 
// 등록한 서비스를 불러올 때는 아래처럼 호출(어디서든 호출 가능)
LocalService obj = Get.find();
...
 
 
 
// ==============================================
// 뷰모델
// ==============================================
 
// 뷰모델은 모두 GetxController를 상속해야 함
class ListViewModel extends GetxController {
 
  // 필드 하나 하나를 Rx로 선언해 Obx 위젯이 변경 내역을 통보받을 수 있게 함
  RxInt clickCount = 0.obs;
  RxBool listLoading = false.obs;
  Rx<List<Article>> list = [].obs;
  ...
 
  addClickCount() {
    clickCount.value = clickCount.value + 1;
  }
  ...
 
 
// 뷰모델은 Widget build가 호출되는 시점에 등록
// 이렇게 등록한 뷰모델은 해당 위젯이 소멸될 때 같이 소멸됨
class HomePage extends StatelessWidget {
  const ListPage({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    // 등록
    Get.put(ListViewModel());
    ...
 
 
// 등록한 뷰모델을 불러올 때는 아래처럼 호출(어디서든 호출 가능)
ListViewModel obj = Get.find();
...
 
 
 
// ==============================================
// 뷰
// ==============================================
 
// 뷰 구현부
class ListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ...
        // Obx는 Rx 변경을 추적하는 위젯
        // Rx로 선언한 clickCount가 변경되면 Obx 내부에 선언된 Text 위젯만 업데이트됨
        Obx(() => Text('CLICK COUNT : ${viewModel.clickCount.value}'))
        ...

// 뷰모델 가져오기

// GetX - 현재 메모리에 존재하는 동일한 타입의 객체 리턴
ListViewModel obj = Get.find();

// Provider - 항상 BuildContext를 파라미터로 전달받아야 함
ListViewModel obj = context.read();

// BLoC - 항상 BuildContext를 파라미터로 전달받아야 함
ListViewModel obj = BlocProvider.of(context);

final tab1 = TabViewModel('tab1');
Get.put(tab1)
 
final tab2 = TabViewModel('tab2'); // 동일한 클래스로 다른 인스턴스를 생성
Get.put(tab2)
 
// tab1을 받을지 tab2를 받을지 알 수 없음
TabViewModel tab = Get.find()

...

// 이 문제는 GetX에서 태그를 지정하는 방식을 사용해야 해결할 수 있음

// 태그 지정해야 함
Get.put(TabViewModel(), tag: 'tab1');
Get.put(TabViewModel(), tag: 'tab2');
 
// 뷰모델 사용, 태그를 알아야 가져올 수 있음
TabViewModel tab1 = Get.find(tag: 'tab1'); 
TabViewModel tab2 = Get.find(tag: 'tab2');
// ← 뷰모델을 사용하는 자식 위젯에게 태그 값을 매번 전달해야 해서 불편, BuildContext를 사용하는 게 낫지 않을까?

// ==============================================
// 서비스
// ==============================================
 
// 서비스 객체, 특별한 규칙이 필요하지 않음
class LocalService {
  ...
 
 
// 위젯 트리 중간에 Provider를 이용해 서비스 주입
// 서비스는 BuildContext의 의존성 주입 룰을 따름
class MyApp extends StatefulWidget {
  @override
  Widget build(BuildContext context) {
    return Provider(
      create: (context) => LocalService(),
      child: HomePage(),
      ...
 
 
// 서비스 객체를 얻는 코드, BuildContext 내에서만 접근 가능
LocalService local = context.read();
...
 
 
 
// ==============================================
// 뷰모델
// ==============================================
 
// 뷰모델은 ChangeNotifier를 상속받아야 함
class ListViewModel extends ChangeNotifier {
  int clickCount = 0;
  ...
 
  addClickCount() {
    clickCount += 1;
    notifyListeners(); // 변경 내역을 뷰에 통보하기 위해 notifyListeners() 호출
  }
  ...
 
 
// 위젯 트리 중간에 ChangeNotifierProvider를 이용해 뷰모델 주입
// 뷰모델은 BuildContext의 의존성 주입 룰을 따름
class HomePage extends StatefulWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => ListViewModel(),
      child: ListView(),
      ...
 
 
// 아래와 같이 호출해 뷰모델 사용, BuildContext 내에서만 접근 가능
ListViewModel list = context.read();
...
 
 
 
// ==============================================
// 뷰
// ==============================================
 
// 뷰모델을 읽어 화면을 업데이트
class ListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ...
        Text('CLICK COUNT : ${context.select((ListViewModel vm) => vm.clickCount)}'), // select viewModel
        ...

class _View extends StatelessWidget {
  ...
  
  // 현재 선택한 List 항목을 삭제하고 결과를 경고 창으로 보여줌
  remove(BuildContext context) async {
    final result = await context.listVm.removeChecked(); // 규칙 위반, 뷰에서 뷰모델 데이터가 아닌 함수 호출 결과 사용
    if (!mounted) return;
    if (result) {
      context.showAlert('SUCCESS');
    } else {
      context.showAlert('ERROR');
    }
  }

// Provider ViewModel
count = 1;
listLoading = true;
notifyListeners(); // 나 자신이 변경됨 

// BLoC CountViewModel
class CountViewModel {
	count = 1
	emit(CountChanged(count)); // count 변경
	...

// BLoC ListViewModel
class ListViewModel {
	emit(ListLoading()); // list가 로딩 중 상태로 변경
	...
 	emit(ListLoaded());  // list 로딩 완료
	...

// BLoC Error - 두 가지 상태를 동시에 가질 수 없음
class ViewModel {
	emit(CountChanged(count), ListLoading()); // 두 가지 상태를 동시에 emit할 수 없음 
	...
	print(state) // 마지막 emit된 상태 하나를 가짐
	...

// ==============================================
// 서비스
// ==============================================
 
// 서비스 객체, 특별한 규칙이 필요하지 않음
class LocalService {
  ...
 
 
// 위젯 트리 중간에 RepositoryProvider를 이용해 서비스 주입
// 서비스는 BuildContext의 의존성 주입 룰 따름
class MyApp extends StatefulWidget {
  @override
  Widget build(BuildContext context) {
    return RepositoryProvider(
      create: (context) => LocalService(),
      child: HomePage(),
      ...
 
 
// 아래와 같이 호출해 서비스 사용, BuildContext 내에서만 접근 가능
LocalService local = RepositoryProvider.of(context);
...
 
 
 
// ==============================================
// 뷰모델
// ==============================================
 
// 뷰모델은 Cubit을 상속받아야 함
class ClickCountCubit extends Cubit {
  addClickCount() {
    final count = state.count + 1;
    emit(ClickCountChanged(count)); // 변경 내역을 뷰에 통보합니다.
  }
  ...
 
 
// Cubit이 발생하는 이벤트는 상태로 정의
class ClickCountChanged {
  int count;
  ...
 
 
// 위젯 트리 중간에 BlocProvider를 이용해 Cubit 주입
// Cubit은 BuildContext의 의존성 주입 룰 따름
class HomePage extends StatefulWidget {
  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        BlocProvider(create: (context) => ListCubit()),
        BlocProvider(create: (context) => ClickCountCubit()),
      ],
      child: ListView(),
      ...
 
 
// 아래와 같이 호출해 Cubit 사용, BuildContext 내에서만 접근 가능
final CountCubit cubit = BlocProvider.of(context);
...
 
 
 
// ==============================================
// 뷰
// ==============================================
 
// Cubit 상태는 BlocBuilder를 이용해 리슨(listen)
class ListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ...
        BlocBuilder<ClickCountCubit, ClickCountState>(builder: (context, state) {
            return Text('CLICK COUNT : ${state.clickCount}');
        }),
        ...
 
 
// Provider가 지원하지 않는 일회성 이벤트 리슨도 지원
class ListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
      return BlocListener(listener: (context, state) {
        if (state is LoadingError) {
          showAlert('ERROR');
        }
    })