import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:skywood/global/const/common_color.dart';
import 'package:skywood/main/lib_file.dart';
import 'package:skywood/utils/tools/widgets/sky_common_widget.dart';

class SearchView extends StatelessWidget {
  const SearchView({super.key,
    required this.searchHistory,
    this.onTapHistory,
    this.onTapClear,
  });

  final List<String> searchHistory;
  final ValueChanged<String>? onTapHistory;
  final Function()? onTapClear;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 15.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Expanded(child: SkyText(text: 'Search History',
                  fontSize: 14,
                  color: CommonColor.black,
                fontWeight: FontWeight.bold,
                lineHeight: 1,
              )),
              IconButton(onPressed: () {
                onTapClear?.call();
              }, icon: HelpImg.asset(ConstImg.delete, width: 16.w, height: 16.w)),
            ],
          ),
          Wrap(
            spacing: 16.w,
            runSpacing: 14.h,
            children: searchHistory
                .map(
                  (item) => _HistoryChip(
                text: item,
                onTap: () => onTapHistory?.call(item),
              ),
            )
                .toList(),
          ),
        ],
      ),
    );
  }
}


class _HistoryChip extends StatelessWidget {
  const _HistoryChip({
    required this.text,
    this.onTap,
  });

  final String text;
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 8.h),
        decoration: BoxDecoration(
          color: const Color(0x0D000000),
          borderRadius: BorderRadius.circular(20.r),
        ),
        child: Text(
          text,
          style: TextStyle(
            color: const Color(0x80000000),
            fontSize: 12.sp,
            fontWeight: FontWeight.w500,
            height: 1,
          ),
        ),
      ),
    );
  }
}