import 'package:chat/configs/app_colors.dart';
import 'package:chat/routes/app_routes.dart';
import 'package:chat/services/auth_service.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

  @override
  _AuthCreateVerifyPageState createState() => _AuthCreateVerifyPageState();
}

class _AuthCreateVerifyPageState extends State<AuthCreateVerifyPage> {
  late final List<String> _mnemonicList;
  late final List<String> _originList;
  List<String> _sureList = List<String>.generate(12, (index) => '');

  @override
  void initState() {
    super.initState();
    Get.arguments['language'];
    var m = Get.arguments['mnemonic'] as List<String>;
    _originList = List.from(m);
    m.shuffle();
    _mnemonicList = m;

    setState(() {
      _sureList = _originList;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('校验助记词'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          _sureArea(),
          const Padding(
            padding: EdgeInsets.symmetric(vertical: 8),
            child: Text('请按正确顺序点击您所备份的助记词'),
          ),
          _moArea(_mnemonicList),
          const SizedBox(height: 16),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _sureList = List<String>.generate(12, (index) => '');
                  });
                },
                child: const Text('重新输入'),
              ),
              ElevatedButton(
                onPressed: _originList.join('') == _sureList.join('')
                    ? () async {
                        var result =
                            await AuthService.to.login(_originList.join(' '));
                        if (result) {
                          Get.offAllNamed(AppRoutes.app);
                        }
                      }
                    : null,
                child: const Text('确认备份'),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _sureArea() {
    return GridView.builder(
      shrinkWrap: true,
      physics: const ClampingScrollPhysics(),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 4.5 / 1,
        crossAxisSpacing: 8,
        mainAxisSpacing: 8,
      ),
      itemCount: 12,
      itemBuilder: (_, i) {
        return Container(
          padding: const EdgeInsets.all(8),
          decoration: BoxDecoration(
            border: Border.all(
              color: AppColors.border,
              width: 1,
            ),
            borderRadius: BorderRadius.circular(8),
          ),
          child: Text(
            '${i + 1}. ${_sureList[i]}',
            style: const TextStyle(
              fontSize: 16,
            ),
          ),
        );
      },
    );
  }

  Widget _moArea(List<String> mnemonic) {
    return GridView.builder(
      shrinkWrap: true,
      physics: const ClampingScrollPhysics(),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 4.5 / 1,
        crossAxisSpacing: 8,
        mainAxisSpacing: 8,
      ),
      itemCount: mnemonic.length,
      itemBuilder: (_, i) {
        return InkWell(
          onTap: !_sureList.contains(mnemonic[i])
              ? () {
                  int len = _sureList.where((element) => element != '').length;
                  setState(() {
                    _sureList[len] = mnemonic[i];
                  });
                }
              : null,
          child: Container(
            padding: const EdgeInsets.all(8),
            decoration: BoxDecoration(
              color: _sureList.contains(mnemonic[i]) ? AppColors.primary : null,
              border: Border.all(
                color: AppColors.border,
                width: 1,
              ),
              borderRadius: BorderRadius.circular(8),
            ),
            child: Text(
              mnemonic[i],
              style: const TextStyle(
                fontSize: 16,
              ),
            ),
          ),
        );
      },
    );
  }
}