import 'package:app_business/service/api.dart';
import 'package:app_business/view/home/dialog_event_register.dart';
import 'package:pretty_qr_code/pretty_qr_code.dart';
import 'package:track_common/widget.dart';
import 'package:track_common/widget/prelude.dart';

import 'event_manage_controller.dart';

class EventManage extends GetView<EventManagerController> {
  const EventManage({super.key});

  @override
  Widget build(BuildContext context) {
    return GetBuilder(
        init: EventManagerController(),
        builder: (c) {
          return Level2View(
              level1: level1(),
              level2: level2(),
              level1Title: '赛事列表',
              level1Action: wDate(context),
              level2Title: '用户列表',
              level2SubTitle: Obx(() => Text(
                    c.selected?.name != null ? '(${c.selected!.name})' : '',
                    style: const TextStyle(color: Colors.grey, fontSize: 14.22),
                  )));
        });
  }

  Widget wDate(BuildContext context) {
    return GestureDetector(
        onTap: () => _onTapDate(context),
        child: Obx(() => Container(
              height: 22.04,
              padding: const EdgeInsets.symmetric(horizontal: 8),
              decoration: BoxDecoration(
                  border:
                      Border.all(color: const Color(0xffe3e3e3), width: 0.71),
                  borderRadius: BorderRadius.circular(2.13)),
              child: Text(controller.dateStr),
            )));
  }

  Future<void> _onTapDate(BuildContext context) async {
    final date = await showDatePicker(
        context: context,
        initialDate: controller.filterDate.value,
        firstDate: DateTime.now(),
        lastDate: DateTime.now().add(365.days));

    if (date != null) {
      controller.filterDate.value = date;
      controller.flushList();
    }
  }

  Widget level1() {
    return Obx(() => ListView(
        children: controller.eventList
            .map((e) => EventTitle(
                  data: e,
                  selected: controller.selectedId.value == e.id,
                  onTap: () => controller.selectedId.value = e.id,
                ))
            .toList()));
  }

  Widget level2() {
    return Column(
      children: [
        Expanded(
            child: Obx(
                () => LineChart(titles: rightTitles(), children: rightUsers())))
      ],
    );
  }

  Iterable<LineChartTitle> rightTitles() {
    return [
      // LineChartTitle(
      //     title: Checkbox(value: true, onChanged: (v) {}), width: 32),
      const LineChartTitle(title: Text('序号'), width: 42),
      const LineChartTitle(title: Text('用户名'), width: 70),
      const LineChartTitle(title: Text('手机号'), flex: 1),
      const LineChartTitle(title: Text('签到时间'), flex: 1),
      const LineChartTitle(title: Text('删除'), width: 67),
    ];
  }

  Iterable<LineChartElem> rightUsers() {
    return controller.userList.indexed.map((e) {
      final (i, one) = e;

      return LineChartElem([
        // Checkbox(value: false, onChanged: (v) {}),
        Text('${i + 1}'),
        Text(one.name),
        Text(one.phone),
        Text(one.checkTime),
        SizedBox(
            width: 51.2,
            height: 22.76,
            child: SmallButton(
              color: const Color(0xffff0000),
              onPressed: () {},
              child: Text('删除'),
            ))
      ]);
    });
  }
}

class EventTitle extends GetView<EventManagerController> {
  final bool selected;
  final EventInManage data;
  final VoidCallback onTap;

  const EventTitle(
      {super.key,
      required this.selected,
      required this.data,
      required this.onTap});

  @override
  Widget build(BuildContext context) {
    var children = <Widget>[
      AppTitleList(
        title: data.name,
        tail: Text('${data.userList.length}'),
        isSelected: selected,
        onTap: onTap,
      )
    ];

    if (selected) {
      children.add(SizedBox(
        height: 2,
      ));
      children.add(Container(
        decoration: const BoxDecoration(
            color: Color(0xfff1f1f1),
            borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(14.22),
                bottomRight: Radius.circular(14.22))),
        padding: const EdgeInsets.all(16.3),
        width: 221.87,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              children: [
                DarkButton(
                    onPressed: data.isAllowDel
                        ? () => controller.deleteEvent(data)
                        : null,
                    child: const Text('删除')),
                const Spacer(),
                DarkButton(
                    color: Colors.blue,
                    onPressed: data.isAllowEdit
                        ? () async {
                            final r = await showEventEditDialog(
                                controller.mapId!,
                                EventRegisterInfo()..name = data.name);
                            if (r != null) {
                              controller.eventEdit(data.id, r);
                            }
                          }
                        : null,
                    child: const Text('修改')),
              ],
            ),
            const SizedBox(height: 24),
            SizedBox.square(
                dimension: 128, child: PrettyQrView.data(data: data.qrCode)),
            const SizedBox(height: 12),
            const Text(
              '用彩图奔跑APP扫码签到',
              style: TextStyle(color: Colors.red, fontSize: 14.22),
            )
          ],
        ),
      ));
    }

    return Column(
      mainAxisSize: MainAxisSize.min,
      children: children,
    );
  }
}