import 'dart:async';
import 'dart:convert';
import 'dart:math';

import 'package:audioplayers/audioplayers.dart';
import 'package:flutter/material.dart';
import 'package:js/js.dart';
import 'package:js/js_util.dart';
import 'package:link/view/component/link_btn.dart';
import 'package:link/view/component/top_container.dart';
import 'package:get/get.dart';
import '../constants.dart';
import '../utils/api.dart';
import '../utils/global.dart';
import '../utils/http_utils.dart';
import '../utils/size_fit.dart';
import '../utils/storage.dart';
import '../utils/util.dart';
import 'dart:js' as js;
import 'dart:html';
import 'package:share_plus_web/share_plus_web.dart';

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

  @override
  State<WelcomePage> createState() => _WelcomePageState();
}

class _WelcomePageState extends State<WelcomePage>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late Animation animation;
  AudioPlayer audioPlayer = AudioPlayer();
  bool isPause = true;
  Timer? timer;
  var user;

  @override
  void initState() {
    controller = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 2400));
    animation = Tween(begin: 0.0, end: 2 * pi).animate(controller);
    controller.addListener(() {
      setState(() {});
    });

    recommends();

    checkToken();
    // controller.repeat();
    // playMusic();
    super.initState();
  }

  // Future checkToken() async {
  //   var json = StorageUtil().getJSON('tempLink');
  //   if (json != null) {
  //     Get.toNamed('/add_link',
  //         parameters: {'social': jsonEncode(json['social']), 'add_more': '1'});
  //   }
  // }

  Future checkToken() async {
    if (Global().token.isNotEmpty) {
      var data =
          await HttpUtils.get(Api.token, params: {'token': Global().token});
      if (data['success'] == false) {
        // Get.toNamed('/login');
        return;
      }
    }

    var jsonUserStep0 = StorageUtil().getJSON('tempUser0');
    if (jsonUserStep0 != null) {
      Get.toNamed('/edit_nick_info');
      return;
    }

    var jsonUserStep1 = StorageUtil().getJSON('tempUser1');
    if (jsonUserStep1 != null) {
      Get.toNamed('/edit_base_info');
      return;
    }

    var jsonLink0 = StorageUtil().getJSON('tempGuideLink0');
    if (jsonLink0 != null) {
      Get.toNamed('/begin_add_first_link');
      return;
    }

    var jsonLink1 = StorageUtil().getJSON('tempGuideLink1');
    if (jsonLink1 != null) {
      Get.toNamed('/add_link',
          parameters: {'social': jsonEncode(jsonLink1['social'])});
      return;
    }

    var json = StorageUtil().getJSON('tempLink');
    if (json != null) {
      Get.toNamed('/add_link',
          parameters: {'social': jsonEncode(json['social']), 'add_more': '1'});
      return;
    }

    if (Global().token.isNotEmpty) {
      Get.offAllNamed('/');
    }
  }

  @override
  void dispose() {
    controller.dispose();
    timer!.cancel();
    super.dispose();
  }

  Future recommends() async {
    var data = await HttpUtils.get(Api.recommend);

    if (data is List) {
      setState(() {
        user = data[0];
      });
      int i = 0;
      timer = Timer.periodic(const Duration(seconds: 3), (e) {
        i++;
        if (i >= data.length) {
          i = 0;
        }
        setState(() {
          user = data[i];
        });
      });
    }

    print(data.toString());
  }

  playMusic() async {
    await audioPlayer.play(
        UrlSource('https://api.fast.dev.liveplus.fun/static/music/test.mp3'));
  }

  pauseMusic() async {
    await audioPlayer.pause();
  }

  tapPlayBtn() {
    setState(() {
      isPause = !isPause;
      if (isPause) {
        controller.stop();
        pauseMusic();
      } else {
        controller.repeat();
        playMusic();
      }
    });
  }

  shareContent() {
    js.context.callMethod('shareSys', ['']);
  }

  topBg() {
    return Positioned(
        left: 0,
        top: 0,
        right: 0,
        child: Image.asset(
          'assets/images/welcome_top.png',
          width: 375.px,
          height: 200.px,
        ));
  }

  content() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        SizedBox(
          height: 80.px,
        ),
        Image.asset(
          'assets/images/logo.png',
          width: 280.px,
          height: 108.px,
        ),
        Container(
          alignment: Alignment.topLeft,
          margin: EdgeInsets.only(
              top: 30.px, bottom: 30.px, left: 23.px, right: 23.px),
          height: 128.px,
          child: Stack(
            children: [
              Positioned(
                top: 22.px,
                child: Container(
                  width: 84.px,
                  height: 84.px,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(42.px),
                      image: (user == null || user['avatar'] == null)
                          ? null
                          : DecorationImage(
                              image: NetworkImage(user['avatar']),
                              fit: BoxFit.cover)
                      // color: Colors.pink,
                      ),
                ),
              ),
              Positioned(
                  right: 0,
                  child: Container(
                    width: 270.px,
                    height: 128.px,
                    padding: EdgeInsets.only(left: 60.px, top: 24.px),
                    alignment: Alignment.topLeft,
                    decoration: const BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage(
                                'assets/images/welcome_social_bg.png'),
                            fit: BoxFit.fill)),
                    child: user == null
                        ? Container()
                        : Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text.rich(TextSpan(children: [
                                TextSpan(
                                    text: '我是',
                                    style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 20.px,
                                        fontWeight: FontWeight.bold)),
                                TextSpan(
                                    text: user['nickname'],
                                    style: TextStyle(
                                        color: kThemeColor,
                                        fontSize: 20.px,
                                        fontWeight: FontWeight.bold))
                              ])),
                              SizedBox(
                                height: 4.px,
                              ),
                              Text(
                                '来自${user['country']}·${user['city']}，快来看看我的主页',
                                style: TextStyle(
                                    color: Colors.white, fontSize: 12.px),
                              ),
                              SizedBox(
                                height: 8.px,
                              ),
                              Row(
                                children: [
                                  if (user != null && user['socials'] != null)
                                    ...List<Widget>.generate(
                                        user['socials'].length, (index) {
                                      return Container(
                                        width: 24.px,
                                        height: 24.px,
                                        decoration: BoxDecoration(
                                            borderRadius:
                                                BorderRadius.circular(6.px),
                                            image: user['socials'][index]
                                                        ['logo'] !=
                                                    null
                                                ? DecorationImage(
                                                    fit: BoxFit.cover,
                                                    image: NetworkImage(
                                                        user['socials'][index]
                                                            ['logo']),
                                                  )
                                                : const DecorationImage(
                                                    image: AssetImage(
                                                        'assets/images/1.png'),
                                                    fit: BoxFit.cover)),
                                        margin: EdgeInsets.only(right: 12.px),
                                      );
                                    }),
                                  // Image.asset(
                                  //   'assets/images/tiktok.png',
                                  //   width: 24.px,
                                  //   height: 24.px,
                                  // ),
                                  // SizedBox(
                                  //   width: 12.px,
                                  // ),
                                  // Image.asset(
                                  //   'assets/images/tiktok.png',
                                  //   width: 24.px,
                                  //   height: 24.px,
                                  // ),
                                  // SizedBox(
                                  //   width: 12.px,
                                  // ),
                                  // Image.asset(
                                  //   'assets/images/tiktok.png',
                                  //   width: 24.px,
                                  //   height: 24.px,
                                  // ),
                                  // SizedBox(
                                  //   width: 12.px,
                                  // ),
                                  // Image.asset(
                                  //   'assets/images/tiktok.png',
                                  //   width: 24.px,
                                  //   height: 24.px,
                                  // ),
                                  // SizedBox(
                                  //   width: 12.px,
                                  // ),
                                ],
                              )
                            ],
                          ),
                  ))
            ],
          ),
        ),
        LinkButton(
            title: '注册',
            disable: false,
            isBlack: false,
            callback: () {
              Get.toNamed('/invite_code');
            }),
        SizedBox(
          height: 36.px,
        ),
        LinkButton(
            title: '登录',
            disable: false,
            isBlack: true,
            callback: () {
              Get.toNamed('/login');
            }),
        SizedBox(height: 50.px),
        // Expanded(child: Container()),
        Text(
          '2022 © LINKBaeBae 链接吧，宝贝！',
          style: TextStyle(color: const Color(0xFF444447), fontSize: 10.px),
        ),
        SizedBox(
          height: 44.px,
        )
      ],
    );
  }

  playContent() {
    return Positioned(
        right: 20.px,
        top: 20.px,
        child: GestureDetector(
          onTap: () {
            tapPlayBtn();
          },
          child: Stack(children: [
            Transform.rotate(
                angle: animation.value,
                child: Image.asset(
                  'assets/images/music.png',
                  width: 28.px,
                  height: 28.px,
                )),
            Opacity(
              opacity: isPause ? 1 : 0,
              child: Image.asset(
                'assets/images/music_pause.png',
                width: 28.px,
                height: 28.px,
              ),
            )
          ]),
        ));
  }

  copyright() {
    return Positioned(
        left: 0,
        right: 0,
        bottom: 44.px,
        child: Text(
          '2022 © LINKBaeBae 链接吧，宝贝！',
          textAlign: TextAlign.center,
          style: TextStyle(color: const Color(0x80000000), fontSize: 10.px),
        ));
  }

  @override
  Widget build(BuildContext context) {
    Util().setPageTitle('welcome');

    SizeFit.initialize(context);
    return Material(
      color: kBgColor,
      child: TopContainer(
        child: SizedBox(
          height: MediaQuery.of(context).size.height,
          width: 375.px,
          child: SingleChildScrollView(
              child: Stack(
            children: [topBg(), content(), playContent()],
          )),
        ),
        //     Stack(
        //   children: [topBg(), content(), playContent(), copyright()],
        // )
      ),
    );
  }
}