import 'package:flutter/material.dart';
import 'package:wisdom_cli/wisdom_cli.dart';

class StatusAndTypePicker extends StatefulWidget {
  StatusAndTypePicker({
    Key? key,
    this.type,
    this.status,
    this.isShowOwe = false,
  }) : super(key: key);

  final type;
  final status;
  final bool? isShowOwe;
  static Future show(context, type, status, isShowOwe) async {
    return await WBottomModalUtil.show(
      context,
      title: Text('智能表筛选'),
      body:
          StatusAndTypePicker(type: type, status: status, isShowOwe: isShowOwe),
    );
  }

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

class ModalBlockState extends State<StatusAndTypePicker> {
  String type = '';
  String status = '';
  bool? isShowOwe;

  reset() async {
    setState(() {
      type = '';
      status = '';
    });
    await Future.delayed(Duration(milliseconds: 100));
    Navigator.pop(context, {'type': '', 'status': ''});
  }

  confirm() async {
    await Future.delayed(Duration(milliseconds: 300));
    Navigator.pop(context, {'type': type, 'status': status});
  }

  @override
  void initState() {
    setState(() {
      type = widget.type;
      status = widget.status;
      isShowOwe = widget.isShowOwe;
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final style = WTheme.of(context);
    final colorScheme = style.colorScheme;
    return Wisdom.column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisSize: MainAxisSize.min,
      children: [
        Wisdom.column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          padding: EdgeInsets.symmetric(
            horizontal: 15.pt,
            vertical: 32.pt,
          ),
          border: Border.symmetric(
            vertical: BorderSide(
              color: Color(0xffE6E6E6),
            ),
          ),
          children: [
            Wisdom(
              margin: EdgeInsets.only(
                bottom: 15.pt,
              ),
              child: Text(
                '表类型',
                style: TextStyle(
                  fontSize: 14.pt,
                  color: colorScheme.mainTitle,
                  fontWeight: FontWeight.w600,
                ),
              ),
            ),
            Wisdom.row(
              mainAxisSize: MainAxisSize.min,
              margin: EdgeInsets.only(
                bottom: 15.pt,
              ),
              children: [
                Wisdom(
                  onTap: () => {
                    setState(() {
                      type = '';
                    })
                  },
                  padding:
                      EdgeInsets.symmetric(horizontal: 15.pt, vertical: 8.pt),
                  margin: EdgeInsets.only(right: 15.pt),
                  child: Text(
                    '全部',
                    style: TextStyle(
                      color: type == '' ? Color(0xffffffff) : Color(0xff212121),
                      fontSize: 13.pt,
                      fontWeight: FontWeight.w300,
                    ),
                  ),
                  color: type == '' ? colorScheme.primary : Color(0xffF1F1F1),
                  borderRadius: BorderRadius.all(Radius.circular(15.pt)),
                ),
                Wisdom(
                  onTap: () => {
                    setState(() {
                      type = 'electricMeter';
                    })
                  },
                  padding:
                      EdgeInsets.symmetric(horizontal: 15.pt, vertical: 8.pt),
                  margin: EdgeInsets.only(right: 15.pt),
                  child: Text(
                    '电表',
                    style: TextStyle(
                      color: type == 'electricMeter'
                          ? Color(0xffffffff)
                          : Color(0xff212121),
                      fontSize: 13.pt,
                      fontWeight: FontWeight.w300,
                    ),
                  ),
                  color: type == 'electricMeter'
                      ? colorScheme.primary
                      : Color(0xffF1F1F1),
                  borderRadius: BorderRadius.all(Radius.circular(15.pt)),
                ),
                Wisdom(
                  onTap: () => {
                    setState(() {
                      type = 'waterMeter';
                    })
                  },
                  padding:
                      EdgeInsets.symmetric(horizontal: 15.pt, vertical: 8.pt),
                  margin: EdgeInsets.only(right: 15.pt),
                  child: Text(
                    '水表',
                    style: TextStyle(
                      color: type == 'waterMeter'
                          ? Color(0xffffffff)
                          : Color(0xff212121),
                      fontSize: 13.pt,
                      fontWeight: FontWeight.w300,
                    ),
                  ),
                  color: type == 'waterMeter'
                      ? colorScheme.primary
                      : Color(0xffF1F1F1),
                  borderRadius: BorderRadius.all(Radius.circular(15.pt)),
                ),
              ],
            ),
            if (isShowOwe == true) ...[
              Wisdom(
                margin: EdgeInsets.only(
                  bottom: 15.pt,
                ),
                child: Text(
                  '欠费状态',
                  style: TextStyle(
                    fontSize: 14.pt,
                    color: colorScheme.mainTitle,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
              Wisdom.row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Wisdom(
                    onTap: () => {
                      setState(() {
                        status = '';
                      })
                    },
                    padding:
                        EdgeInsets.symmetric(horizontal: 15.pt, vertical: 8.pt),
                    margin: EdgeInsets.only(right: 15.pt),
                    child: Text(
                      '全部',
                      style: TextStyle(
                        color: status == ''
                            ? Color(0xffffffff)
                            : Color(0xff212121),
                        fontSize: 13.pt,
                        fontWeight: FontWeight.w300,
                      ),
                    ),
                    color:
                        status == '' ? colorScheme.primary : Color(0xffF1F1F1),
                    borderRadius: BorderRadius.all(Radius.circular(14.5.pt)),
                  ),
                  Wisdom(
                    onTap: () => {
                      setState(() {
                        status = 'owe';
                      })
                    },
                    padding:
                        EdgeInsets.symmetric(horizontal: 15.pt, vertical: 8.pt),
                    margin: EdgeInsets.only(right: 15.pt),
                    child: Text(
                      '欠费',
                      style: TextStyle(
                        color: status == 'owe'
                            ? Color(0xffffffff)
                            : Color(0xff212121),
                        fontSize: 13.pt,
                        fontWeight: FontWeight.w300,
                      ),
                    ),
                    color: status == 'owe'
                        ? colorScheme.primary
                        : Color(0xffF1F1F1),
                    borderRadius: BorderRadius.all(Radius.circular(14.5.pt)),
                  ),
                  Wisdom(
                    onTap: () => {
                      setState(() {
                        status = 'noOwe';
                      })
                    },
                    padding:
                        EdgeInsets.symmetric(horizontal: 15.pt, vertical: 8.pt),
                    margin: EdgeInsets.only(right: 15.pt),
                    child: Text(
                      '不欠费',
                      style: TextStyle(
                        color: status == 'noOwe'
                            ? Color(0xffffffff)
                            : Color(0xff212121),
                        fontSize: 13.pt,
                        fontWeight: FontWeight.w300,
                      ),
                    ),
                    color: status == 'noOwe'
                        ? colorScheme.primary
                        : Color(0xffF1F1F1),
                    borderRadius: BorderRadius.all(Radius.circular(14.5.pt)),
                  ),
                ],
              ),
            ],
          ],
        ),
        Wisdom.row(
          mainAxisSize: MainAxisSize.min,
          padding: EdgeInsets.all(15.pt),
          children: [
            Wisdom(
              onTap: () => reset(),
              alignment: Alignment.center,
              border: Border.all(color: Color(0xffE5E5E5)),
              padding: EdgeInsets.symmetric(vertical: 10.pt),
              width: 90.pt,
              margin: EdgeInsets.only(right: 15.pt),
              borderRadius: BorderRadius.circular(25.pt),
              child: Text(
                '重置',
                style: TextStyle(
                  fontSize: 16.pt,
                  fontWeight: FontWeight.w300,
                  color: colorScheme.mainTitle,
                ),
              ),
            ),
            Wisdom(
              onTap: () => confirm(),
              padding: EdgeInsets.symmetric(vertical: 10.pt),
              alignment: Alignment.center,
              color: colorScheme.primary,
              borderRadius: BorderRadius.circular(25.pt),
              child: Text(
                '确认',
                style: TextStyle(
                  fontSize: 16.pt,
                  fontWeight: FontWeight.w300,
                  color: Color(0xffffffff),
                ),
              ),
            ).asExpanded(),
          ],
        ),
      ],
    );
  }
}
