import 'package:flutter/material.dart';
import 'package:skywood/global/client/play_client.dart';
import 'package:skywood/main/lib_file.dart';
import 'package:skywood/pages/home/players/page/drama_detail_page.dart';
import 'package:skywood/pages/like/widget/no_data_view.dart';
import 'package:skywood/pages/search/page/result_page.dart';
import 'package:skywood/utils/models/drama/skywood_drama.dart';
import 'package:skywood/utils/tools/app_toast.dart';
import 'package:skywood/utils/tools/widgets/sky_app_bar.dart';
import 'package:skywood/utils/tools/widgets/sky_common_widget.dart';

import '../../../utils/tools/sky_time_tool.dart';

class MineCollectionPage extends StatefulWidget {

  const MineCollectionPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _CollectionPageState();
  }
}

class _CollectionPageState extends State<MineCollectionPage> {

  List<SkywoodDrama> _collectionList = [];
  bool _isLoading = false;

  @override
  void initState() {
    super.initState();
    _getCollection();
  }

  void _getCollection() {
    AppToast.showLottieLoading();
    _isLoading = true;
    PlayClient.getCollections().then((value) {
      AppToast.dismiss();
      _isLoading = false;
      if (!mounted) return;
      setState(() {
        _collectionList = value;
      });
    });
  }

  void _cancelCol(int shortPlayId) {
    // AppToast.showLottieLoading();
    // remove
    _collectionList.removeWhere((element) => element.shortPlayId == shortPlayId);
    PlayClient.cancelCollect(shortPlayId: shortPlayId).then((value) {
      // AppToast.dismiss();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: SkyAppBar(
        title: 'Collection',
        actions: [],
      ),
      body: !_isLoading && _collectionList.isEmpty ? NoDataView() : ListView.separated(
          itemBuilder: (context, index) {
            final item = _collectionList[index];
            return Dismissible(
              onDismissed: (direction) {
                _cancelCol(item.shortPlayId!);

              },
              key: Key(item.shortPlayId.toString()),
              child: MineItemView(drama: _collectionList[index]),
            );
          },
          separatorBuilder: (context, index) {
            return const SizedBox(height: 5);
          },
          itemCount: _collectionList.length
      ),
    );

  }

}


class MineItemView extends StatelessWidget {

  const MineItemView({super.key,
    required this.drama,
    this.onTap
  });

  final SkywoodDrama drama;
  final Function()? onTap;

  @override
  Widget build(BuildContext context) {

    return Container(
      height: 120.h,
      padding: const EdgeInsets.symmetric(horizontal: 15),
      child: Row(
        children: [
          HelpImg.networkRadius(drama.imageUrl, width: 90.w, height: 110.h,
            borderRadius: BorderRadius.circular(6),
            fit: BoxFit.cover,
          ),
          const SizedBox(width: 10),
          Expanded(child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(height: 8),
              SkyText(text: drama.name,
                fontSize: 14,
                fontWeight: FontWeight.bold,
                color: CommonColor.black,
              ),
              const SizedBox(height: 12),

              SkyText(text: drama.description,
                fontSize: 11,
                color: CommonColor.withValue('4D4047'),
                maxLines: 2,
              ),
              Spacer(),
              _tipView(true, text: 'EP.${drama.episodeTotal}'),
              const SizedBox(height: 10),
            ],
          ))
        ],
      ),
    ).addInkWell(onTap: onTap);
  }

  Widget _tipView(bool isStar, {required String text}) {
    String imgName = isStar ? ConstImg.star : ConstImg.look;
    return Row(
      children: [
        HelpImg.asset(imgName, width: 12.w, height: 12.w),
        const SizedBox(width: 2),
        SkyText(text: text, fontSize: 12, color: Colors.grey)
      ],
    );
  }
}