import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:vbvs_app/common/color/appConstants.dart';
import 'package:vbvs_app/common/util/FitTool.dart';
import 'package:vbvs_app/common/util/MyUtils.dart';
import 'package:vbvs_app/component/tool/ClickableContainer.dart';
import 'package:vbvs_app/enum/APPPackageType.dart';
import 'package:vbvs_app/pages/device_bind/componnet/bind_dialog.dart';

class SleepChartContainer extends StatelessWidget {
  final Map sleepReport;
  final String title;
  final String tipText;
  final Widget? chartContent;
  final List<dynamic> showLabel;
  const SleepChartContainer(
      {Key? key,
      required this.sleepReport,
      required this.title,
      required this.tipText,
      required this.chartContent,
      required this.showLabel})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      decoration: BoxDecoration(
        color: themeController.currentColor.sc5,
        borderRadius: BorderRadius.circular(25.rpx),
      ),
      padding: EdgeInsets.fromLTRB(26.rpx, 29.rpx, 26.rpx, 45.rpx),
      child: Column(
        mainAxisSize: MainAxisSize.max,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                title,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 30.rpx,
                ),
              ),
              ClickableContainer(
                  backgroundColor: Colors.transparent,
                  highlightColor: Colors.white, // 或设置为你需要的水波纹颜色
                  padding: EdgeInsetsDirectional.fromSTEB(
                      14.rpx, 10.rpx, 14.rpx, 10.rpx), //
                  borderRadius: 0.rpx,
                  onTap: () {
                    if (AppConstants().ent_type == APPPackageType.MHT.code) {
                      showTipDialog(
                        context,
                        Container(
                          child: Text(
                            tipText,
                            style: TextStyle(
                              fontSize: 26.rpx,
                              color: Colors.black,
                            ),
                          ),
                        ),
                        backgroundColor: Color(0xFFFFFFFF),
                        colors: [
                          Color(0XFF1592AA),
                          Color(0xFF0C83A7),
                          Color(0xFF006FA3)
                        ],
                      );
                    } else {
                      showTipDialog(
                          context,
                          Container(
                            child: Text(
                              tipText,
                              style: TextStyle(
                                fontSize: 26.rpx,
                                color: themeController.currentColor.sc3,
                              ),
                            ),
                          ),
                          backgroundColor: themeController.currentColor.sc17,
                          colors: AppConstants().thNormalButton);
                    }
                  },
                  child: Container(
                    width: 30.rpx,
                    height: 30.rpx,
                    child: SvgPicture.asset(
                      'assets/img/icon/explain.svg',
                      color: Color(0xFFD3D3D3),
                    ),
                  )),
            ],
          ),
          const SizedBox(height: 16),
          Container(
            child: chartContent ?? Container(),
          ),
          Wrap(
            spacing: 32.rpx,
            runSpacing: 20.rpx,
            children: showLabel.map<Widget>((item) {
              return Container(
                padding: EdgeInsets.all(5),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Container(
                      width: 20.rpx,
                      height: 20.rpx,
                      decoration: BoxDecoration(
                        color: stringToColor("${item["color"]}"),
                        borderRadius: BorderRadius.circular(10.rpx),
                      ),
                    ),
                    SizedBox(width: 17.rpx),
                    Text(
                      item["name"],
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 24.rpx,
                      ),
                    ),
                  ],
                ),
              );
            }).toList(),
          ),
        ],
      ),
    );
  }
}