import 'package:didvan/constants/assets.dart';
import 'package:didvan/routes/routes.dart';
import 'package:didvan/views/profile/direct_list/direct_list_state.dart';
import 'package:didvan/views/profile/direct_list/widgets/direct_item.dart';
import 'package:didvan/views/widgets/didvan/divider.dart';
import 'package:didvan/views/widgets/didvan/scaffold.dart';
import 'package:didvan/views/widgets/shimmer_placeholder.dart';
import 'package:didvan/views/widgets/state_handlers/empty_state.dart';
import 'package:didvan/views/widgets/state_handlers/sliver_state_handler.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:provider/provider.dart';

class DirectList extends StatefulWidget {
  const DirectList({Key? key}) : super(key: key);

  @override
  State<DirectList> createState() => _DirectListState();
}

class _DirectListState extends State<DirectList> {
  @override
  void initState() {
    Future.delayed(Duration.zero, () {
      context.read<DirectListState>().getDirectsList();
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<DirectListState>(
      builder: (context, state, child) => DidvanScaffold(
        padding: const EdgeInsets.symmetric(vertical: 16),
        appBarData: null,
        showSliversFirst: true,
        slivers: [
          SliverAppBar(
            pinned: true,
            backgroundColor: Theme.of(context).colorScheme.surface,
            automaticallyImplyLeading: false,
            leadingWidth: 200,
            leading: Padding(
              padding: const EdgeInsetsDirectional.only(start: 0.0),
              child: SvgPicture.asset(
                Assets.horizontalLogoWithText,
                fit: BoxFit.contain,
                height: 80,
              ),
            ),
            actions: [
              IconButton(
                  onPressed: () {
                    Navigator.of(context).pushNamed(Routes.bookmarks);
                  },
                  icon: SvgPicture.asset(
                      'lib/assets/icons/hugeicons_telescope-01.svg')),
              IconButton(
                  onPressed: () => Navigator.of(context).pop(),
                  icon: SvgPicture.asset(
                    'lib/assets/icons/arrow-left.svg',
                    color: const Color.fromARGB(255, 102, 102, 102),
                  )),
              const SizedBox(width: 8),
            ],
          ),
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.end,
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      TextButton.icon(
                        style: ButtonStyle(
                          backgroundColor: MaterialStateProperty.all<Color>(
                            const Color.fromARGB(255, 0, 126, 167),
                          ),
                          shape:
                              MaterialStateProperty.all<RoundedRectangleBorder>(
                            RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(8.0),
                            ),
                          ),
                        ),
                        onPressed: () {
                          Navigator.of(context).pushNamed(
                            Routes.direct,
                            arguments: {'type': 'پشتیبانی اپلیکیشن'},
                          ).then((value) {
                            if (mounted) {
                              context.read<DirectListState>().getDirectsList();
                            }
                          });
                        },
                        icon: SvgPicture.asset(
                          'lib/assets/icons/add.svg',
                          height: 20,
                          color: Theme.of(context).colorScheme.surface,
                        ),
                        label: Text(
                          'تیکت جدید',
                          style: TextStyle(
                            color: Theme.of(context).colorScheme.surface,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                      // if (state.unreadCount > 0)
                      //   Padding(
                      //     padding: const EdgeInsetsDirectional.only(start: 8),
                      //     child: DidvanBadge(
                      //       text: state.unreadCount.toString(),
                      //     ),
                      //   ),
                    ],
                  ),
                ],
              ),
            ),
          ),
          SliverStateHandler<DirectListState>(
            onRetry: state.getDirectsList,
            itemPadding: const EdgeInsets.symmetric(horizontal: 16),
            state: state,
            placeholder: const _ChatRoomPlaceholder(),
            builder: (context, state, index) => ChatRoomItem(
              chatRoom: state.chatRooms[index],
              onBackButtonPressed: () {
                state.chatRooms.clear();
                state.getDirectsList();
              },
            ),
            childCount: state.chatRooms.length,
            enableEmptyState: state.chatRooms.isEmpty,
            emptyState: EmptyState(
              asset: Assets.emptyBookmark,
              title: 'پیامی وجود ندارد',
            ),
          ),
        ],
      ),
    );
  }
}

class _ChatRoomPlaceholder extends StatelessWidget {
  const _ChatRoomPlaceholder({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Column(
      children: [
        Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ShimmerPlaceholder(
              height: 24,
              width: 24,
            ),
            SizedBox(width: 12),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  ShimmerPlaceholder(
                    height: 24,
                    width: 100,
                  ),
                  SizedBox(height: 12),
                  ShimmerPlaceholder(
                    height: 16,
                    width: 300,
                  ),
                  SizedBox(height: 12),
                  ShimmerPlaceholder(
                    height: 12,
                    width: 80,
                  ),
                ],
              ),
            ),
          ],
        ),
        DidvanDivider(),
      ],
    );
  }
}