import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:trackoffical_app/service/api.dart';
import 'package:trackoffical_app/utils.dart';
import 'package:trackoffical_app/widget/app_dialog.dart';
import 'package:trackoffical_app/widget/app_top_bar.dart';
import 'package:trackoffical_app/pb.dart' as pb;

class GuardianView extends StatefulWidget {
  const GuardianView({super.key});

  @override
  State<StatefulWidget> createState() {
    return GuardianViewState();
  }
}

class GuardianViewState extends State<GuardianView> {
  var data = <pb.CareTakerInfo>[];
  var phone = '';
  var memo = '';
  final api = ApiService.to;
  final Rx<String?> textErr = Rx(null);

  @override
  void initState() {
    super.initState();

    api.guardianList().then((value) {
      setState(() {
        data = value;
      });
    });
  }
  validateMobile(String value) {
    const pattern = r'(^(?:[+0]9)?[0-9]{10,12}$)';
    final regExp = RegExp(pattern);

    if (value.isEmpty) {
      textErr.value = '请输入手机号';
    } else if (!regExp.hasMatch(value)) {
      textErr.value = '请输入正确的手机号';
    }else{
      textErr.value = null;
    }

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppTopBar(
        title: const Text('监护人'),
        automaticallyImplyLeading: true,
        actions: [
          IconButton(onPressed: onAdd, icon: const Icon(Icons.add)),
        ],
      ),
      body: Padding(
          padding: const EdgeInsets.all(12),
          child: ListView.builder(
              itemCount: data.length,
              itemBuilder: (context, i) {
                return elem(data[i]);
              })),
    );
  }

  Widget elem(pb.CareTakerInfo info) {
    return Card(
      child: ListTile(
        title: Text(info.memo.isNotEmpty? info.memo: info.cPhone),
        trailing: info.isLock
            ? const IconButton(onPressed: null, icon: Icon(Icons.lock_outline))
            : IconButton(
                onPressed: () => onDelete(info),
                icon: const Icon(Icons.delete)),
      ),
    );
  }

  onDelete(pb.CareTakerInfo info) async {
    await Get.dialog(AppDialog(
      title: const Text('确认删除监护人？'),
      content: Text(info.memo.isNotEmpty? info.memo: info.cPhone),
      onCancel: () => Get.back(),
      onConfirm: () async {
        await api.guardianDel(info);
        final newList = await api.guardianList();
        setState(() {
          data = newList;
        });
        Get.back();
      },
    ));
  }

  onAdd() async {

    final phoneController = TextEditingController();

    await Get.dialog(AlertDialog(
      title: const Text('添加监护人'),
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          TextField(
            onChanged: (v) {
              memo = v.trim();
            },
            decoration: const InputDecoration(
                hintText: '昵称',
            ),
            maxLength: 20,
          ),
          Obx(()=>TextField(
            onChanged: (v) {
              phone = v.trim();
            },
            controller: phoneController,
            keyboardType: TextInputType.phone,
            decoration: InputDecoration(
                hintText: '手机号码',
                errorText: textErr.value
            ),
          ))
        ],
      ) ,
      actions: [
        TextButton(onPressed: () => Get.back(), child: const Text('取消')),
        FilledButton(
            onPressed: () async {
              validateMobile(phone);
              if(textErr.value!= null){
                return;
              }
              tryCatchApi(() async{
                await api.guardianAdd(phone, memo);
              }, onError: (e){
                textErr.value = e.message;
                return true;
              }, onSuccess: ()async{
                final newList = await api.guardianList();
                setState(() {
                  data = newList;
                });
                Get.back();
              });

            },
            child: const Text('确定'))
      ],
    ));
  }
}