import 'dart:async';

import 'package:flutter/material.dart';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:go_router/go_router.dart';

import 'package:together_mobile/common/constants.dart';
import 'package:together_mobile/models/init_get_it.dart';
import 'package:together_mobile/models/route_state_model.dart';
import 'package:together_mobile/models/user_model.dart';
import 'package:together_mobile/request/server.dart';

class MyProfileScreen extends StatefulWidget {
  const MyProfileScreen({super.key});

  @override
  State<MyProfileScreen> createState() => _MyProfileScreenState();
}

class _MyProfileScreenState extends State<MyProfileScreen> {
  final accountProfile = {
    '账号': getIt.get<UserAccount>().username,
    '邮箱': getIt.get<UserAccount>().email,
  };
  late final _isOpen = List.generate(accountProfile.length, (index) => false);

  @override
  Widget build(BuildContext context) {
    Timer(
      const Duration(milliseconds: 300),
      () => getIt.get<RouteState>().changeRoute('MyProfile'),
    );

    accountProfile.addAll(getIt.get<UserProfile>().toMapCn());
    final List<ExpansionPanel> expansionList = [];
    var index = 0;
    accountProfile.forEach(
      (keyK, valueV) {
        expansionList.add(
          ExpansionPanel(
            headerBuilder: (context, isOpen) {
              return Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 8.0),
                    child: Text(
                      keyK,
                      style: const TextStyle(fontSize: 17),
                    ),
                  ),
                  Expanded(
                    child: Align(
                      alignment: Alignment.centerRight,
                      child: AnimatedSlide(
                        offset: isOpen ? const Offset(0, 4) : Offset.zero,
                        duration: const Duration(milliseconds: 170),
                        child: AnimatedOpacity(
                          opacity: isOpen ? 0 : 1,
                          duration: const Duration(milliseconds: 120),
                          child: Text(
                            valueV,
                            style: const TextStyle(
                              color: kUnActivatedColor,
                              fontSize: 17,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              );
            },
            body: Align(
              alignment: Alignment.center,
              child: Padding(
                padding: const EdgeInsets.fromLTRB(8, 0, 55, 20),
                child: Text(
                  valueV,
                  textAlign: TextAlign.justify,
                  style: const TextStyle(
                    color: kUnActivatedColor,
                    fontSize: 17,
                  ),
                ),
              ),
            ),
            isExpanded: _isOpen[index],
            canTapOnHeader: true,
          ),
        );
        index++;
      },
    );
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: CustomScrollView(
              physics: const AlwaysScrollableScrollPhysics(),
              slivers: [
                SliverAppBar(
                  expandedHeight: 240,
                  floating: true,
                  pinned: true,
                  stretch: true,
                  backgroundColor: Colors.orange,
                  flexibleSpace: FlexibleSpaceBar(
                    title: Text(getIt.get<UserProfile>().nickname),
                    titlePadding: const EdgeInsets.only(left: 0, bottom: 15),
                    centerTitle: true,
                    collapseMode: CollapseMode.pin,
                    stretchModes: const [
                      StretchMode.zoomBackground,
                      StretchMode.blurBackground,
                      StretchMode.fadeTitle,
                    ],
                    background: Center(
                      child: Material(
                        elevation: 10.0,
                        shape: const CircleBorder(),
                        child: GestureDetector(
                          onTap: () {
                            context.pushNamed('MyAvatar', queryParameters: {
                              'avatar': getIt.get<UserProfile>().avatar
                            });
                          },
                          child: CircleAvatar(
                            radius: 60,
                            backgroundImage: CachedNetworkImageProvider(
                              '$userAvatarsUrl/${getIt.get<UserProfile>().avatar}',
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                SliverToBoxAdapter(
                  child: ExpansionPanelList(
                    expansionCallback: (i, isOpen) {
                      setState(() {
                        _isOpen[i] = isOpen;
                      });
                    },
                    children: expansionList,
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                OutlinedButton(
                  onPressed: () {
                    context.pushNamed('ChangeBasic');
                  },
                  style: OutlinedButton.styleFrom(
                    fixedSize: const Size(150, 45),
                    side: const BorderSide(color: kUnAvailableColor),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(6.0),
                    ),
                  ),
                  child: const Text(
                    '编辑资料',
                    style: TextStyle(fontSize: 18),
                  ),
                ),
                FilledButton(
                  onPressed: () {
                    context.pushNamed(
                      'Message',
                      queryParameters: {
                        'type': '0',
                        'friendId': getIt.get<UserAccount>().id
                      },
                    );
                  },
                  style: FilledButton.styleFrom(
                      fixedSize: const Size(150, 45),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(6))),
                  child: const Text(
                    '发消息',
                    style: TextStyle(fontSize: 18),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}