import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:keyboard/data/bean/option_select_item.dart';

import '../../../data/bean/option_select_config.dart';
import '../../../resource/colors.gen.dart';

/// 切换选中时回调
typedef OnOptionSelectCallback =
    void Function(OptionSelectConfig config, OptionSelectItem optionItem);

/// 选项选择组件
class OptionSelectWidget extends StatelessWidget {
  /// 选项行的配置
  final OptionSelectConfig optionSelect;

  /// 切换选中时回调
  final OnOptionSelectCallback optionSelectCallback;

  const OptionSelectWidget({
    super.key,
    required this.optionSelect,
    required this.optionSelectCallback,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 标题
        _buildTitle(),
        SizedBox(height: 8.h),
        // 选项
        _buildOptionList(),
      ],
    );
  }

  /// 图标和标题
  Widget _buildTitle() {
    String icon = optionSelect.iconUrl;
    return Row(
      children: [
        Visibility(
          visible: icon.isNotEmpty,
          child: Row(
            children: [
              // 图标
              CachedNetworkImage(
                imageUrl: icon,
                height: 14.h,
                width: 14.w,
                fit: BoxFit.fill,
              ),
              SizedBox(width: 2),
            ],
          ),
        ),
        // 标题
        Text(
          optionSelect.title,
          style: TextStyle(
            fontSize: 12.sp,
            fontWeight: FontWeight.w500,
            color: ColorName.black80,
          ),
        ),
      ],
    );
  }

  /// 选项列表
  Widget _buildOptionList() {
    return Wrap(
      direction: Axis.horizontal,
      alignment: WrapAlignment.start,
      // 主轴间距
      spacing: 8.0,
      // 交叉轴间距
      runSpacing: 7.0,
      children: [
        for (var option in optionSelect.options)
          _buildOptionItem(optionSelect, option),
      ],
    );
  }

  /// 选项
  /// [rowConfig] 选项行的配置
  /// [optionItem] 当前构建的那一项
  Widget _buildOptionItem(
    OptionSelectConfig rowConfig,
    OptionSelectItem optionItem,
  ) {
    // 背景圆角
    double bgBorderRadius = 31.r;

    // 背景，选中时为渐变色，未选中时为灰色
    BoxDecoration bgDecoration;
    if (optionItem.selected) {
      bgDecoration = BoxDecoration(
        gradient: LinearGradient(
          colors: [
            ColorName.bgOptionSelectSelected1,
            ColorName.bgOptionSelectSelected2,
          ],
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
        ),
        borderRadius: BorderRadius.circular(bgBorderRadius),
      );
    } else {
      bgDecoration = BoxDecoration(
        color: ColorName.bgOptionSelectNormal,
        borderRadius: BorderRadius.circular(bgBorderRadius),
      );
    }

    return GestureDetector(
      onTap: () {
        optionSelectCallback(rowConfig, optionItem);
      },
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 6.h),
        decoration: bgDecoration,
        child: Text(
          optionItem.name,
          style: TextStyle(
            fontSize: 13.sp,
            fontWeight: FontWeight.w400,
            // 文字颜色，选中时为白色，未选中时为黑色
            color: optionItem.selected ? ColorName.white : ColorName.black80,
          ),
        ),
      ),
    );
  }
}