import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:tone_snap/generated/assets.dart';
import 'package:tone_snap/modules/sideb/widgets/remove_padding_music_bar.dart';

import 'search_music_controller.dart';

class SearchMusicView extends GetView<SearchMusicController> {
  const SearchMusicView({super.key});

  @override
  Widget build(BuildContext context) {
    Get.put(SearchMusicController());

    return SafeArea(
      child: Column(
        children: [
          _buildSearch(),
          _buildHistory(),
          const Spacer(),
          const RemovePaddingMusicBar(),
        ],
      ),
    );
  }

  Widget _buildSearch() {
    return GestureDetector(
      onTap: controller.openSearch,
      child: Container(
        height: 32.h,
        margin: EdgeInsets.symmetric(vertical: 10.h, horizontal: 18.w),
        padding: EdgeInsets.symmetric(horizontal: 18.w),
        decoration: BoxDecoration(
          color: const Color(0xFF212121),
          borderRadius: BorderRadius.circular(20).r,
        ),
        child: Row(
          children: [
            Image.asset(
              Assets.sideBSearchWhite,
              width: 16.w,
              height: 16.w,
            ),
            SizedBox(width: 10.w),
            Text(
              'Search songs,playlists',
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                color: const Color(0xFF666666),
                fontSize: 14.sp,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildHistory() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          height: 46.h,
          padding: const EdgeInsets.only(left: 18, right: 12).w,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                'History',
                style: TextStyle(
                  color: const Color(0xFF666666),
                  fontSize: 14.sp,
                ),
              ),
              Obx(() {
                return Visibility(
                  visible: controller.historyList.isNotEmpty,
                  child: ClipOval(
                    child: Material(
                      color: Colors.transparent,
                      child: InkWell(
                        onTap: controller.deleteHistory,
                        child: Padding(
                          padding: const EdgeInsets.all(6).w,
                          child: Image.asset(
                            Assets.sideBDeleteHistory,
                            width: 24.w,
                            height: 24.w,
                          ),
                        ),
                      ),
                    ),
                  ),
                );
              }),
            ],
          ),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 18).w,
          child: GetBuilder<SearchMusicController>(
            id: 'history',
            builder: (logic) {
              return Wrap(
                spacing: 8.w,
                runSpacing: 8.h,
                children: controller.historyList.map((history) {
                  return InkWell(
                    onTap: () => controller.onTapHistoryItem(history),
                    child: IntrinsicWidth(
                      child: Container(
                        padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 4.h),
                        decoration: BoxDecoration(
                          color: const Color(0xFF1F1F1F),
                          borderRadius: BorderRadius.circular(30).r,
                        ),
                        alignment: Alignment.center,
                        child: Text(
                          history,
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 12.sp,
                          ),
                        ),
                      ),
                    ),
                  );
                }).toList(),
              );
            },
          ),
        ),
      ],
    );
  }
}
