import 'package:cs_resources/generated/assets.dart';
import 'package:cs_resources/generated/l10n.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/my_text_view.dart';
import 'package:widgets/widget_export.dart';

import '../profile_edit_view_model.dart';

class AvatarEditDialog extends HookConsumerWidget {
  void Function(String path) otherAction;
  void Function() photoAction;

  AvatarEditDialog({
    required this.photoAction,
    required this.otherAction,
  });

  @override
  Widget build(BuildContext context,WidgetRef ref) {
    final state = ref.watch(profileEditViewModelProvider);

    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          width: double.infinity,
          padding: const EdgeInsets.only(top: 31.5, bottom: 30.5, left: 27.5, right: 27.5),
          decoration: BoxDecoration(
            color: context.appColors.whiteBG,
            borderRadius: const BorderRadius.all(Radius.circular(15)),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                width: double.infinity,
                height: 50,
                decoration: const BoxDecoration(
                  color: Color(0XFFE9ECF8),
                  borderRadius: BorderRadius.all(Radius.circular(5)),
                ),
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const MyAssetImage(
                      Assets.profileEditDialogUpload,
                      width: 27.5,
                      height: 27.5,
                    ),
                    MyTextView(
                      S.current.upload_a_photo, 
                      fontSize: 16,
                      isFontMedium: true,
                      textColor: context.appColors.textBlack,
                      marginLeft: 12,
                    ),
                  ],
                ).onTap((){
                  onCancel();
                  photoAction.call();
                }),
              ),

              //分割线
              Stack(
                children: [
                  const MyAssetImage(Assets.profileEditXuLine, width: 270, height: 1).marginOnly(top: 10),
                  Align(
                    alignment: Alignment.center,
                    child: MyTextView(
                      S.current.or,
                      textColor: context.appColors.textDarkGray,
                      fontSize: 16,
                      isFontMedium: true,
                    ),
                  ),
                ],
              ).marginOnly(top: 26, bottom: 6),

              //图片九宫格
              GridView.builder(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3, // 每行显示的列数
                  mainAxisSpacing: 20.0, // 主轴（上下）的间距
                  crossAxisSpacing: 15.0, // 交叉轴（左右）的间距
                  childAspectRatio: 1, // 宽高比例
                ),
                itemCount: state.defaultAvatars?.length ?? 0,
                itemBuilder: (context, index) {
                  return Center(
                    child: MyLoadImage(state.defaultAvatars?[index]).onTap((){
                      onCancel();
                      otherAction.call(state.defaultAvatars?[index]??"");
                    }),
                  );
                },
              ),
            ],
          ),
        ),
        const MyAssetImage(
          Assets.profileEditDialogDelete,
          width: 25,
          height: 25.5,
        ).onTap(() {
          onCancel();
        }).marginOnly(top: 23.5),
      ],
    ).constrained(width: 325);
  }

//取消弹框
  void onCancel() async {
    SmartDialog.dismiss();
  }
}
