import 'package:cs_resources/theme/app_colors_theme.dart';
import 'package:cs_resources/theme/theme_config.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/widget_export.dart';
import 'package:cs_resources/generated/assets.dart';

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

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

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

  Widget _buildItemLeftSection(BuildContext context, WidgetRef ref, item, _vm) {
    return Column(
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Center(
              child: Text(
                'SHOW THE VERIFICATION CODE TO YOUR MERCHANT',
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 20.0,
                    color: Colors.black,
                    fontWeight: FontWeight.w500),
              ),
            ),
            Text(
              'VERIFICATION CODE',
              style: TextStyle(
                  fontSize: 18.0,
                  color: ColorUtils.string2Color('#54638C'),
                  fontWeight: FontWeight.w500),
            ).marginOnly(top: 35, bottom: 20),
            Text(
              '778890',
              style: TextStyle(
                  fontSize: 36.0,
                  color: ColorUtils.string2Color('#4161D0'),
                  fontWeight: FontWeight.w500),
            ),
          ],
        ),
      ],
    );
  }

  // listitem
  Widget _buildSaleItem(BuildContext context, WidgetRef ref, item, _vm) {
    return Column(
      children: [
        Container(
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(6.0)),
            boxShadow: [
              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);
  }

  // SearchOf
  Widget _buildSearchOf(BuildContext context, WidgetRef ref, _vm) {
    List itemsList = _vm.state.list.toList();
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        _buildSearchRecent(context, ref, _vm),
        _buildSearchTrending(context, ref, _vm),
        _buildSearchRecently(context, ref, _vm),
      ],
    );
  }

// Recent
  Widget _buildSearchRecent(BuildContext context, WidgetRef ref, _vm) {
    List itemsList = _vm.state.list.toList();
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Text(
          'Recent Searches',
          style: TextStyle(
              fontSize: 16.0,
              color: ColorUtils.string2Color('#000000'),
              fontWeight: FontWeight.w500),
        ).marginOnly(bottom: 20),
        Wrap(
            direction: Axis.horizontal, // 水平方向排列
            spacing: 10.0, // 子组件之间的间距
            runSpacing: 15.0, // 子组件行与行之间的间距
            children: List.generate(4, (index) {
              return _buildSearchRecentItem(context, ref, _vm);
            }))
      ],
    ).marginOnly(bottom: 20);
  }

  Widget _buildSearchRecentItem(BuildContext context, WidgetRef ref, _vm) {
    return Container(
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(3.0)),
      ),
      padding: const EdgeInsets.all(10),
      child: Text(
        'Dragon bowl',
        style: TextStyle(
            fontSize: 14.0,
            color: ColorUtils.string2Color('#969696'),
            fontWeight: FontWeight.w400),
      ),
    );
  }

  // Trending
  Widget _buildSearchTrending(BuildContext context, WidgetRef ref, _vm) {
    List itemsList = _vm.state.list.toList();
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Text(
          'Trending Searches',
          style: TextStyle(
              fontSize: 16.0,
              color: ColorUtils.string2Color('#000000'),
              fontWeight: FontWeight.w500),
        ).marginOnly(bottom: 20),
        Wrap(
            direction: Axis.horizontal, // 水平方向排列
            spacing: 10.0, // 子组件之间的间距
            runSpacing: 15.0, // 子组件行与行之间的间距
            children: List.generate(4, (index) {
              return _buildSearchTrendingItem(context, ref, _vm);
            }))
      ],
    ).marginOnly(bottom: 20);
  }

  Widget _buildSearchTrendingItem(BuildContext context, WidgetRef ref, _vm) {
    return Container(
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(3.0)),
      ),
      padding: const EdgeInsets.all(10),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          const MyAssetImage(
            Assets.rewardsRewardsHost,
            width: 12,
            height: 14,
          ).marginOnly(right: 5),
          Text(
            'Dragon bowl',
            style: TextStyle(
                fontSize: 14.0,
                color: ColorUtils.string2Color('#969696'),
                fontWeight: FontWeight.w400),
          ),
        ],
      ),
    );
  }

  // Recently
  Widget _buildSearchRecently(BuildContext context, WidgetRef ref, _vm) {
    List itemsList = _vm.state.list.toList();
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Text(
          'Recently viewed',
          style: TextStyle(
              fontSize: 16.0,
              color: ColorUtils.string2Color('#000000'),
              fontWeight: FontWeight.w500),
        ).marginOnly(bottom: 18),
        Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: List.generate(2, (index) {
              return _buildSearchItem(context, ref, _vm);
            }))
      ],
    );
  }

  Widget _buildSearchItem(BuildContext context, WidgetRef ref, _vm) {
    return Container(
        // width: MediaQuery.of(context).size.width / 2 - 25,
        // height: 240,
        padding: const EdgeInsets.only(bottom: 20),
        decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(6.0)),
          boxShadow: [
            BoxShadow(color: Color.fromRGBO(184, 191, 217, 0.3), blurRadius: 6)
          ],
        ),
        child: Column(
          children: [
            const MyAssetImage(
              Assets.rewardsRewardsIndex1,
              // width: 110,
              height: 149,
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text(
                  maxLines: 1, // 设置最大行数为2
                  overflow: TextOverflow.ellipsis, // 超出部分用省略号表示
                  'Cute children multifunctional ……',
                  style: TextStyle(
                      fontSize: 15.0,
                      color: Colors.black,
                      fontWeight: FontWeight.w500),
                ),
                Text(
                  maxLines: 1, // 设置最大行数为2
                  overflow: TextOverflow.ellipsis, // 超出部分用省略号表示
                  'Hong Ye Group Co., Ltd',
                  style: TextStyle(
                      fontSize: 13.0,
                      color: ColorUtils.string2Color('#808DAF'),
                      fontWeight: FontWeight.w400),
                ).marginOnly(bottom: 5),
                Row(
                  children: [
                    const Text(
                      '300',
                      style: TextStyle(
                          fontSize: 18.0,
                          color: Colors.black,
                          fontWeight: FontWeight.w500),
                    ),
                    Text(
                      '350',
                      style: TextStyle(
                          decoration: TextDecoration.lineThrough,
                          decorationColor: ColorUtils.string2Color('#808DAF'),
                          decorationStyle: TextDecorationStyle.solid,
                          fontSize: 13.0,
                          color: ColorUtils.string2Color('#808DAF'),
                          fontWeight: FontWeight.w400),
                    ).marginOnly(left: 5, right: 5),
                    const Text(
                      'Points',
                      style: TextStyle(
                          fontSize: 13.0,
                          color: Colors.black,
                          fontWeight: FontWeight.w400),
                    ),
                  ],
                )
              ],
            ).paddingOnly(top: 12, left: 12, right: 12)
          ],
        )).marginOnly(bottom: 13);
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final _vm = ref.read(rewardsSearchVmProvider.notifier);
    final state = ref.watch(rewardsSearchVmProvider);
    return Scaffold(
      appBar: MyAppBar.searchAppBar(context,
          backgroundColor: Colors.white,
          systemUiOverlayStyle:
              ThemeConfig.systemUiOverlayStyleLightThemeBlack),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        physics: const BouncingScrollPhysics(),
        clipBehavior: Clip.none,
        child: Container(
            width: MediaQuery.of(context).size.width,
            color: ColorUtils.string2Color('#F2F3F6'),
            padding: const EdgeInsets.only(top: 20, left: 15, right: 15),
            child: _buildSearchOf(context, ref, _vm)),
      ),
    );
  }
}