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

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:link/utils/storage.dart';
import 'package:link/view/component/button.dart';
import 'package:link/view/component/link_btn.dart';
import 'package:link/view/component/marquee.dart';
import 'package:link/view/component/toast.dart';

import '../constants.dart';
import '../utils/api.dart';
import '../utils/http_utils.dart';
import '../utils/size_fit.dart';
import 'component/link_step.dart';
import 'component/top_container.dart';
import 'component/web_image.dart';
import 'package:image_network/image_network.dart';

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

  @override
  State<BeginAddLink> createState() => _BeginAddLinkState();
}

class _BeginAddLinkState extends State<BeginAddLink> {
  List socials = [];
  List socials0 = [],socials1 = [],socials2 = [];
  bool isFirstEnter = true;
  @override
  void initState() {
    // TODO: implement initState

    Map<String, dynamic> data = Get.parameters;
    if (data.isNotEmpty) {
      isFirstEnter = data['add_more'] != '1';
    }
    getLinks();
    if (isFirstEnter) {
      StorageUtil().setJSON('tempGuideLink0', {});
    }

    super.initState();
  }

  Future getLinks() async {
    var data = await HttpUtils.get(Api.topSocials);
    if (data is List) {
      socials = data;
      for (int i = 0;i<socials.length;i++){
        if (i%3==0){
          socials0.add(socials[i]);
        }
        if (i%3==1){
          socials1.add(socials[i]);
        }
        if (i%3==2){
          socials2.add(socials[i]);
        }
      }
      setState(() {
        
      });
      // setState(() {
      //   socials = data;
      // });
    }
  }

  addLink(var social) {
    Get.toNamed('/add_link', parameters: {
      'social': jsonEncode(social),
      'add_more': isFirstEnter ? '0' : '1'
    });
    StorageUtil().remove('tempGuideLink0');
  }

  detail() {
    return Column(
      children: [
        SizedBox(
          height: 32.px,
        ),
        if (isFirstEnter)
          Row(mainAxisAlignment: MainAxisAlignment.center, children: [
            LinkStep(step: -1, content: '', hasShadow: false),
            Container(
              width: 60.px,
              height: 8.px,
              transform: Matrix4.translationValues(-1, 0, 0),
              decoration: const BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight,
                      colors: [
                    Color(0xFF74747A),
                    Color(0xFF74747A),
                    kThemeColor
                  ])),
            ),
            Container(
              transform: Matrix4.translationValues(-2, 0, 0),
              child: LinkStep(step: 2, content: '添加我的第 1 个链接', hasShadow: true),
            )
          ]),
        if (isFirstEnter)
          SizedBox(
            height: 36.px,
          ),
        Container(
          width: 343.px,
          height: 408.px,
          decoration: BoxDecoration(
              color: const Color(0xFF2C2C2E),
              borderRadius: BorderRadius.circular(24.px)),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                margin: EdgeInsets.only(top: 22.px, left: 20.px),
                child: Text(
                  '选择要添加的平台',
                  style: TextStyle(
                      color: kThemeColor,
                      fontSize: 20.px,
                      fontWeight: FontWeight.bold),
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 8.px, left: 20.px),
                child: Text(
                  '点击添加后，该平台将展示在我的主页',
                  style: TextStyle(
                      color: const Color(0xFFA5A5AD), fontSize: 12.px),
                ),
              ),
              if (socials0.isNotEmpty)
                Container(
                  margin: EdgeInsets.only(top: 16.px),
                  height: 72.px,
                  child: Marquee(
                      offset: 0.0,
                      child: Row(
                        children: [
                          ...List<Widget>.generate(socials0.length, (i) {
                            return Container(
                              margin: EdgeInsets.only(right: 12.px),
                              child: Button(
                                  child:
                                      // WebImage(
                                      //   url: socials[i]['logo'],
                                      //   width: 72.px,
                                      //   height: 72.px,
                                      //   borderRadius: 18.px,
                                      // ),
                                      ClipRRect(
                                    borderRadius: BorderRadius.circular(18.px),
                                    child: Image.network(
                                      socials0[i]['logo'],
                                      width: 72.px,
                                      height: 72.px,
                                      fit: BoxFit.cover,
                                    ),
                                  ),
                                  callback: () {
                                    addLink(socials0[i]);
                                  }),
                            );
                          }),
                        ],
                      )),
                ),
              if (socials1.isNotEmpty)
                Container(
                  margin: EdgeInsets.only(top: 16.px),
                  height: 72.px,
                  child: Marquee(
                      offset: 36.px,
                      child: Row(
                        children: [
                          ...List<Widget>.generate(socials1.length, (i) {
                            return Container(
                              margin: EdgeInsets.only(right: 12.px),
                              child: Button(
                                  child:
                                      // WebImage(
                                      //   url: socials[i]['logo'],
                                      //   width: 72.px,
                                      //   height: 72.px,
                                      //   borderRadius: 18.px,
                                      // ),
                                      ClipRRect(
                                    borderRadius: BorderRadius.circular(18.px),
                                    child: Image.network(
                                      socials1[i]['logo'],
                                      width: 72.px,
                                      height: 72.px,
                                      fit: BoxFit.cover,
                                    ),
                                  ),
                                  callback: () {
                                    addLink(socials1[i]);
                                  }),
                            );
                          }),
                        ],
                      )),
                ),
              if (socials2.isNotEmpty)
                Container(
                  margin: EdgeInsets.only(top: 16.px, bottom: 10.px),
                  height: 72.px,
                  child: Marquee(
                      offset: 0.0,
                      child: Row(
                        children: [
                          ...List<Widget>.generate(socials2.length, (i) {
                            return Container(
                              margin: EdgeInsets.only(right: 12.px),
                              child: Button(
                                  child:
                                      // WebImage(
                                      //   url: socials[i]['logo'],
                                      //   width: 72.px,
                                      //   height: 72.px,
                                      //   borderRadius: 18.px,
                                      // ),
                                      ClipRRect(
                                    borderRadius: BorderRadius.circular(18.px),
                                    child: Image.network(
                                      socials2[i]['logo'],
                                      width: 72.px,
                                      height: 72.px,
                                      fit: BoxFit.cover,
                                    ),
                                  ),
                                  callback: () {
                                    addLink(socials2[i]);
                                  }),
                            );
                          }),
                        ],
                      )),
                ),
              GestureDetector(
                onTap: () {
                  Get.toNamed('/choose_social',
                      parameters: {'add_more': isFirstEnter ? '0' : '1'});
                },
                child: Container(
                    width: 343.px,
                    height: 52.px,
                    alignment: Alignment.center,
                    child: Text(
                      '搜索更多',
                      textAlign: TextAlign.center,
                      style: TextStyle(color: kBtnColor, fontSize: 14.px),
                    )),
              )
            ],
          ),
        ),
        SizedBox(
          height: 45.px,
        ),
        if (!isFirstEnter) Expanded(child: Container()),
        LinkButton(
            title: '下一步',
            disable: false,
            isBlack: false,
            callback: () {
              Toast().showInfoText('请选择平台并添加链接和标题', context: context);
            }),
        SizedBox(
          height: 40.px,
        ),
        if (isFirstEnter)
          GestureDetector(
            onTap: () {
              var user = StorageUtil().getJSON('userInfo');
              // Get.toNamed('/', parameters: {'u': user['id']});
              Get.offAllNamed('/', parameters: {'u': user['id']});
              StorageUtil().remove('tempGuideLink0');
            },
            child: Text(
              '稍后添加',
              style: TextStyle(color: const Color(0xFF74747A), fontSize: 14.px),
            ),
          ),
        if (isFirstEnter)
          SizedBox(
            height: 40.px,
          )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    SizeFit.initialize(context);
    return Material(
        color: kBgColor,
        child: TopContainer(
            child: Stack(children: [
          if (isFirstEnter)
            SingleChildScrollView(
              child: detail(),
            ),
          if (!isFirstEnter) detail()
        ])));
  }
}