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

import '../../utils/size_fit.dart';
import 'link_btn.dart';

class Menu extends StatefulWidget {
  bool enable = true;
  var close;
  Menu({Key? key, bool? isEnable, var closeMenu}) : super(key: key) {
    if (isEnable != null) {
      enable = isEnable;
    }

    if (closeMenu != null) {
      close = closeMenu;
    }
  }

  @override
  State<Menu> createState() => _MenuState();
}

class _MenuState extends State<Menu> {
  logoutAlert() {
    return Container(
      alignment: Alignment.center,
      padding: EdgeInsets.only(top: 32.px, bottom: 32.px),
      child: Column(
        children: [
          SvgPicture.asset(
            'assets/icons/question.svg',
            width: 48.px,
            height: 48.px,
          ),
          SizedBox(
            height: 12.px,
          ),
          Text(
            '确定要退出当前账号吗？',
            textAlign: TextAlign.center,
            style: TextStyle(
                color: Colors.white,
                fontSize: 16.px,
                fontWeight: FontWeight.bold),
          ),
          SizedBox(
            height: 16.px,
          ),
          AlertButton(
              title: '立即退出',
              isCancel: false,
              width: 220.px,
              height: 40.px,
              callback: () {
                Toast().hideHud();
                widget.close();
                StorageUtil().clearAll();
                Global().token = '';
                Global().hasLogin = false;
                Get.toNamed('/welcome');
              }),
          SizedBox(
            height: 24.px,
          ),
          AlertButton(
              title: '取消',
              isCancel: true,
              width: 220.px,
              height: 40.px,
              callback: () {
                Toast().hideHud();
              }),
        ],
      ),
    );
  }

  logout() {
    if (widget.enable == false) {
      return;
    }
    Toast().showCustomHud(logoutAlert(), context: context);
  }

  tapItem(i) {
    if (!widget.enable) {
      return;
    }
    switch (i) {
      case 0:
        Get.toNamed('/choose_theme');
        break;
      case 1:
        Get.toNamed('/edit_info');
        break;
      case 2:
        Get.toNamed('/account');
        break;
      case 3:
        Get.toNamed('/history');
        break;
    }
    widget.close();
  }

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

    List items = [
      {'name': '主题风格', 'icon': 'assets/icons/theme.svg'},
      {'name': '基本信息', 'icon': 'assets/icons/base_info.svg'},
      {'name': '账号安全', 'icon': 'assets/icons/safe.svg'},
      {'name': '访问历史', 'icon': 'assets/icons/history.svg'}
    ];
    return Container(
      width: 120.px,
      color: const Color(0xE6000000),
      alignment: Alignment.topLeft,
      child: Stack(children: [
        SizedBox(
          width: 120.px,
        ),
        Positioned(
            left: 24.px,
            top: 24.px,
            child: GestureDetector(
              onTap: () {
                if (widget.enable) {
                  widget.close();
                }
              },
              child: SvgPicture.asset(
                'assets/icons/close.svg',
                width: 24.px,
                height: 24.px,
              ),
            )),
        Column(
          children: [
            SizedBox(
              width: 120.px,
              height: 84.px,
            ),
            ...List<Widget>.generate(items.length, (i) {
              return Container(
                margin: EdgeInsets.only(bottom: 36.px),
                child: GestureDetector(
                  onTap: () {
                    tapItem(i);
                  },
                  child: Column(
                    children: [
                      SvgPicture.asset(
                        items[i]['icon'],
                        width: 36.px,
                        height: 36.px,
                      ),
                      SizedBox(
                        height: 8.px,
                      ),
                      Text(
                        items[i]['name'],
                        style: TextStyle(color: Colors.white, fontSize: 14.px),
                      )
                    ],
                  ),
                ),
              );
            }),
            Expanded(child: Container()),
            GestureDetector(
              onTap: () {
                logout();
              },
              child: Text(
                '退出登录',
                style: TextStyle(color: Colors.white, fontSize: 14.px),
              ),
            ),
            SizedBox(
              height: 12.px,
            ),
            Text(
              'v1.0.0',
              style: TextStyle(color: const Color(0xFF444447), fontSize: 12.px),
            ),
            SizedBox(
              height: 24.px,
            ),
          ],
        )
      ]),
    );
  }
}