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

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:link/model/model.dart';
import 'package:link/utils/global.dart';
import 'package:link/view/component/link_btn.dart';

import '../constants.dart';
import '../utils/api.dart';
import '../utils/http_utils.dart';
import '../utils/size_fit.dart';
import 'component/top_container.dart';
import 'home_content.dart';

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

  @override
  State<ChooseTheme> createState() => _ChooseThemeState();
}

class _ChooseThemeState extends State<ChooseTheme> {
  int selGroup = 0;
  String selId = "";
  int column = 6;
  List groups = [];
  var current;

  @override
  void initState() {
    // TODO: implement initState
    getGroup();
    super.initState();
  }

  Future getGroup() async {
    if (Global().userBean == null) {
      Timer(const Duration(seconds: 1), () {
        getGroup();
      });
      return;
    }
    var data = await HttpUtils.get(Api.themeStyles);
    setState(() {
      column = data['column'];
      groups = data['themes'];
      selId = Global().themeId;

      for (int i = 0; i < groups.length; i++) {
        List array = groups[i]['categories'];
        for (var e in array) {
          List themes = e['styles'];
          for (var theme in themes) {
            if (theme['id'] == selId) {
              current = theme['styles'];
              selGroup = i;
            }
          }
        }
      }
    });
  }

  Future save() async {
    var data =
        await HttpUtils.post(Api.userThemes, data: {'theme_style_id': selId});
    Get.back();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  preview() {
    Get.toNamed('/home_preview', parameters: {"style": jsonEncode(current)});
  }

  category() {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        children: [
          SizedBox(
            width: 20.px,
          ),
          ...List<Widget>.generate(groups.length, (i) {
            return Container(
              margin: EdgeInsets.only(right: 12.px),
              child: GestureDetector(
                onTap: () {
                  setState(() {
                    selGroup = i;
                  });
                },
                child: Container(
                  height: 32.px,
                  alignment: Alignment.center,
                  padding: EdgeInsets.only(left: 12.px, right: 12.px),
                  child: Text(
                    groups[i]['name'],
                    style: TextStyle(
                        fontSize: 14.px,
                        color: selGroup == i
                            ? kThemeColor
                            : const Color(0xFF74747A)),
                  ),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(16.px),
                      border: Border.all(
                          color:
                              selGroup == i ? kThemeColor : Colors.transparent,
                          width: 2.px)),
                ),
              ),
            );
          }),
        ],
      ),
    );
  }

  content() {
    return SingleChildScrollView(
      child: Column(children: [
        ...List<Widget>.generate(groups[selGroup]['categories'].length, (i) {
          var categoryObj = groups[selGroup]['categories'][i];
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              SizedBox(
                height: 20.px,
              ),
              Row(
                children: [
                  SizedBox(
                    width: 20.px,
                  ),
                  Text(
                    categoryObj['name'],
                    style: TextStyle(
                        color: const Color(0xFF74747A),
                        fontSize: 12.px,
                        fontWeight: FontWeight.bold),
                  ),
                  SizedBox(
                    width: 5.px,
                  ),
                  Expanded(
                      child: Container(
                    height: 1.px,
                    color: const Color(0xFF2C2C2E),
                  )),
                  SizedBox(
                    width: 20.px,
                  )
                ],
              ),
              SizedBox(
                height: 6.px,
              ),
              SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      SizedBox(
                        width: 18.px,
                      ),
                      ...List<Widget>.generate(categoryObj['styles'].length,
                          (j) {
                        var objTheme = categoryObj['styles'][j];
                        return GestureDetector(
                          onTap: () {
                            setState(() {
                              selId = objTheme['id'];
                              current = objTheme['styles'];
                            });
                          },
                          child: Container(
                            margin: EdgeInsets.only(
                                right: categoryObj['styles'].length > 4
                                    ? 12.px
                                    : 22.px),
                            child: item(
                                selId == objTheme['id'], objTheme['styles']),
                          ),
                        );
                      }),
                    ],
                  ))
            ],
          );
        }),
      ]),
    );
  }

  item(bool hasChoose, style) {
    double scale = 60 / 375.0;
    double height = MediaQuery.of(context).size.height * 60 / 375.0 + 0.2;
    return Column(
      children: [
        Container(
          width: 68.px,
          height: height + 8.px, //124.px,
          alignment: Alignment.center,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(9.px),
              color: const Color(0xFF131314),
              border: Border.all(
                  color: hasChoose ? kThemeColor : Colors.transparent,
                  width: 2.px)),
          child: Container(
            width: 60.px,
            height: height,
            // height: 116.px,
            decoration: BoxDecoration(
              // color: const Color(0xFFB3B3B3),
              borderRadius: BorderRadius.circular(6.px),
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(6.px),
              child: HomeContent(
                userBean: Global().userBean!,
                styles: style,
                socials: Global().socials!,
                scale: scale,
                isPreview: true,
              ),
            ),
          ),
        ),
        // if (hasChoose)
        Container(
            width: 20.px,
            height: 20.px,
            transform: Matrix4.translationValues(0, -10.px, 0),
            decoration: hasChoose
                ? const BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage('assets/images/checked.png')))
                : const BoxDecoration(color: Colors.transparent))
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    SizeFit.initialize(context);

    if (groups.isEmpty) {
      return Container(
        decoration: const BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [Color(0xFF131314), Color(0xFFD5D5E0)])),
      );
    }
    UserBean bean = Global().userBean!;
    return Material(
        color: kBgColor,
        child: TopContainer(
            child: Stack(children: [
          Positioned(
              child: Container(
            decoration: const BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Color(0xFF131314), Color(0xFFD5D5E0)])),
          )),
          Container(
            width: 375.px,
            height: 72.px,
            padding: EdgeInsets.only(left: 20.px, right: 20.px),
            child: Row(
              children: [
                Expanded(
                  child: GestureDetector(
                      onTap: () {
                        Get.back();
                      },
                      child: Text(
                        '退出编辑',
                        style: TextStyle(
                            color: const Color(0x99FFFFFF), fontSize: 14.px),
                      )),
                ),
                GestureDetector(
                  onTap: () {
                    preview();
                  },
                  child: SvgPicture.asset(
                    'assets/icons/preview.svg',
                    color: Colors.white,
                  ),
                )
              ],
            ),
          ),
          Column(
            children: [
              SizedBox(
                width: 375.px,
                height: 0.px,
              ),
              Container(
                width: MediaQuery.of(context).size.width * 0.2,
                height: MediaQuery.of(context).size.height * 0.2,
                margin: EdgeInsets.only(top: 25.px, bottom: 25.px),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(4.px),
                    boxShadow: [
                      BoxShadow(
                          color: const Color(0xB3000000),
                          blurRadius: 24.px,
                          offset: Offset(0, 12.px))
                    ]),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(4.px),
                  child: HomeContent(
                    userBean: Global().userBean!,
                    styles: current,
                    socials: Global().socials!,
                    scale: 0.2,
                    isPreview: true,
                  ),
                ),
              ),
              Expanded(
                  child: ClipRRect(
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(24.px),
                    topRight: Radius.circular(24.px)),
                child: Container(
                  decoration: BoxDecoration(
                      color: const Color(0xFF131314),
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(24.px),
                          topRight: Radius.circular(24.px))),
                  child: Stack(children: [
                    Positioned(
                        left: 0,
                        right: 0,
                        top: 56.px,
                        bottom: 74.px,
                        child: content()),
                    Container(
                      height: 68.px,
                      padding: EdgeInsets.only(top: 14.px),
                      alignment: Alignment.topLeft,
                      decoration: BoxDecoration(
                          gradient: const LinearGradient(
                              begin: Alignment.topCenter,
                              end: Alignment.bottomCenter,
                              colors: [
                                Color(0xFF131314),
                                Color(0xFF131314),
                                Color(0x00131314),
                              ],
                              stops: [
                                0,
                                0.82,
                                1
                              ]),
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(24.px),
                              topRight: Radius.circular(24.px))),
                      child: SizedBox(width: 375.px, child: category()),
                    ),
                    Positioned(
                      left: 0,
                      top: 0.px,
                      bottom: 0.px,
                      width: 20.px,
                      child: Container(
                          width: 20.px,
                          decoration: const BoxDecoration(
                            gradient: LinearGradient(
                                begin: Alignment.centerLeft,
                                end: Alignment.centerRight,
                                colors: [
                                  Color(0xFF131314),
                                  Color(0x00131314),
                                ]),
                          )),
                    ),
                    Positioned(
                      right: 0,
                      top: 0.px, //68.px,
                      bottom: 0.px,
                      width: 20.px,
                      child: Container(
                          width: 20.px,
                          decoration: const BoxDecoration(
                            gradient: LinearGradient(
                                begin: Alignment.centerRight,
                                end: Alignment.centerLeft,
                                colors: [
                                  Color(0xFF131314),
                                  Color(0x00131314),
                                ]),
                          )),
                    ),
                    Positioned(
                        left: 0,
                        right: 0,
                        bottom: 0,
                        height: 110.px,
                        child: Container(
                          height: 110.px,
                          padding: EdgeInsets.only(top: 30.px),
                          alignment: Alignment.topCenter,
                          decoration: const BoxDecoration(
                            gradient: LinearGradient(
                                begin: Alignment.bottomCenter,
                                end: Alignment.topCenter,
                                colors: [
                                  Color(0xFF131314),
                                  Color(0xFF131314),
                                  Color(0x00131314),
                                ],
                                stops: [
                                  0,
                                  0.81,
                                  1
                                ]),
                          ),
                          child: Row(
                            children: [
                              GestureDetector(
                                child: Container(
                                  width: 88.px,
                                  child: SvgPicture.asset(
                                    'assets/icons/filter.svg',
                                    width: 24.px,
                                    height: 24.px,
                                    color: Colors.white,
                                  ),
                                ),
                              ),
                              LinkButton(
                                  title: '保存',
                                  disable: false,
                                  isBlack: false,
                                  btnWidth: 255.px,
                                  btnHeight: 48.px,
                                  callback: () {
                                    save();
                                  }),
                            ],
                          ),
                        ))
                  ]),
                ),
              ))
            ],
          )
        ])));
  }
}