import 'package:cs_resources/generated/l10n.dart';
import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:flutter/cupertino.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:shared/utils/log_utils.dart';
import 'package:shared/utils/color_utils.dart';
import 'package:widgets/ext/ex_widget.dart';
import 'package:widgets/my_appbar.dart';
import 'package:widgets/my_load_image.dart';
import 'package:widgets/shatter/picker_container.dart';
import 'package:widgets/utils/dark_theme_util.dart';
import 'package:widgets/widget_export.dart';
import 'package:cs_resources/generated/assets.dart';

import '../../../router/page/rewards_page_router.dart';
import './rewards_code_vm.dart';

@RoutePage()
class RewardsCodePage extends HookConsumerWidget {
  final int? code;

  const RewardsCodePage({Key? key, @PathParam('code') required this.code}) : super(key: key);

  //启动当前页面
  static void startInstance({
    BuildContext? context,
    int? code,
  }) {
    if (context != null) {
      context.router.push(RewardsCodePageRoute(code: code));
    } else {
      appRouter.push(RewardsCodePageRoute(code: code));
    }
  }

  Widget _buildItemLeftSection(BuildContext context, WidgetRef ref, item, _vm) {
    int? codes = code ?? 0;
    return Column(
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: Text(
                S.current.show_verification_cap,
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 20.0, color: context.appColors.textBlack, fontWeight: FontWeight.w500),
              ),
            ),
            Text(
              S.current.verification_code_cap,
              style: TextStyle(
                  fontSize: 18.0,
                  color: DarkThemeUtil.multiColors(context, ColorUtils.string2Color('#54638C'), darkColor: Colors.white),
                  fontWeight: FontWeight.w500),
            ).marginOnly(top: 35, bottom: 20),
            Text(
              '$codes',
              style: TextStyle(
                  fontSize: 36.0,
                  color: DarkThemeUtil.multiColors(context, AppColorsTheme.colorPrimary, darkColor: Colors.white),
                  fontWeight: FontWeight.w500),
            ),
          ],
        ),
      ],
    );
  }

  // listitem
  Widget _buildSaleItem(BuildContext context, WidgetRef ref, item, _vm) {
    return Column(
      children: [
        Container(
          decoration: BoxDecoration(
            color: context.appColors.whiteBG,
            borderRadius: const BorderRadius.all(Radius.circular(6.0)),
            boxShadow: const [BoxShadow(color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)],
          ),
          width: MediaQuery.of(context).size.width - 30,
          height: 250,
          // margin: const EdgeInsets.only(left: 15, right: 15, top: 12.5),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [_buildItemLeftSection(context, ref, item, _vm)],
          ).paddingOnly(left: 26, right: 26, top: 40),
        ),
      ],
    ).marginOnly(left: 15, bottom: 15, right: 15);
  }

  // list
  Widget _buildSaleList(BuildContext context, WidgetRef ref, _vm) {
    List itemsList = _vm.state.list.toList();
    return _buildSaleItem(context, ref, itemsList[0], _vm);
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final _vm = ref.read(rewardsCodeVmProvider.notifier);
    final state = ref.watch(rewardsCodeVmProvider);
    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
        S.current.verification_code,
        backgroundColor: context.appColors.whiteBG,
      ),
      body: Container(
        child: Column(
          children: [
            Expanded(
              child: EasyRefresh(
                child: Container(
                  color: context.appColors.backgroundDark,
                  padding: const EdgeInsets.only(top: 15),
                  child: _buildSaleList(context, ref, _vm),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}
