import 'package:cpt_community/router/page/community_page_router.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:router/ext/auto_router_extensions.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_appbar.dart';
import 'package:widgets/my_text_field.dart';
import 'package:widgets/widget_export.dart';
import 'package:widgets/my_button.dart';

import 'newsfeed_post_vm.dart';

@RoutePage()
class NewsfeedPostPage extends HookConsumerWidget {
  const NewsfeedPostPage({Key? key}) : super(key: key);

  //启动当前页面
  static void startInstance({BuildContext? context}) {
    if (context != null) {
      context.router.push(const NewsfeedPostPageRoute());
    } else {
      appRouter.push(const NewsfeedPostPageRoute());
    }
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // final viewModel = ref.watch(newsfeedPostVmProvider.notifier);
    final state = ref.watch(newsfeedPostVmProvider);

    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
        "Create Post",
        backgroundColor: context.appColors.whiteBG,
      ),
      backgroundColor: context.appColors.backgroundDefault,
      body: Column(
        children: [
          Expanded(
            child: SingleChildScrollView(
              scrollDirection: Axis.vertical,
              physics: const BouncingScrollPhysics(),
              clipBehavior: Clip.none,
              child: Column(
                children: [
                  Container(
                    width: double.infinity,
                    height: 200,
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: Colors.grey,
                        width: 1
                      ),
                      borderRadius: BorderRadius.circular(10),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey.withOpacity(0.5),
                          spreadRadius: 1,
                          blurRadius: 1,
                          offset: const Offset(0, 3), // changes position of shadow
                        ),
                      ]
                    ),
                    child: _buildInputLayout(
                      context,
                      state,
                      'mind'
                    ),
                  ).marginOnly(left:15, right:15, top: 20, bottom: 20),
                  Container(
                    width: double.infinity,
                    height: 200,
                    color: Colors.grey,
                  ),
                ]
              )
            )
          ),
          Container(
            child: Row(
                children: [
                  Expanded(
                    child: MyButton(
                      text: "Add Card",
                      backgroundColor: context.appColors.textPrimary,
                      textColor: Colors.white,
                      fontWeight: FontWeight.w500,
                      fontSize: 16,
                      onPressed: (){
                        // Navigator.pop(context);
                      },
                    ),
                  ),
                ]
            ),
          )
        ]
      ),
    );
  }


  /// 输入框
  Widget _buildInputLayout(
      BuildContext context,
      state,
      String key,
      {
        double marginTop = 0,
        bool? showRightIcon = false, //是否展示右侧的布局
        Widget? rightWidget, //右侧的布局
        TextInputType textInputType = TextInputType.text,
        String? errorText,
        bool obscureText = false,
        TextInputAction textInputAction = TextInputAction.done,
        Function? onSubmit,
      }) {
    return IgnoreKeyboardDismiss(
      child: MyTextField(
        key,
        fillBackgroundColor: context.appColors.authFiledBG,
        state.formData[key]!['value'],
        hintText: state.formData[key]!['hintText'],
        hintStyle: TextStyle(
          color: context.appColors.authFiledHint,
          fontSize: 16.0,
          fontWeight: FontWeight.w500,
        ),
        controller: state.formData[key]!['controller'],
        focusNode: state.formData[key]!['focusNode'],
        margin: EdgeInsets.only(top: marginTop),
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 3),
        showDivider: false,
        height: 44,
        style: TextStyle(
          color: context.appColors.authFiledText,
          fontSize: 16.0,
          fontWeight: FontWeight.w500,
        ),
        inputType: textInputType,
        textInputAction: textInputAction,
        onSubmit: onSubmit,
        cursorColor: context.appColors.authFiledText,
        obscureText: obscureText,
        errorText: errorText,
        showLeftIcon: true,
        showRightIcon: showRightIcon,
        rightWidget: rightWidget,
      ),
    );
  }
}
