import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:lba/gen/assets.gen.dart';

class Nearby extends StatefulWidget {
  const Nearby({super.key});

  @override
  State<Nearby> createState() => _NearbyState();
}

class _NearbyState extends State<Nearby> {
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 70,
        shadowColor: Colors.grey,
        elevation: 2,
        automaticallyImplyLeading: false,
        title: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              Row(
                children: [
                  Expanded(
                    child: SizedBox(
                      height: 40,
                      child: TextField(
                        decoration: InputDecoration(
                          hintText: 'What are you looking for?',
                          hintStyle: const TextStyle(
                            color: Colors.grey,
                            fontSize: 13,
                          ),
                          prefixIcon: Padding(
                            padding: const EdgeInsets.all(10.0),
                            child: SvgPicture.asset(
                              Assets.icons.riSearch2Line.path,
                              width: 18,
                              height: 18,
                            ),
                          ),
                          filled: true,
                          fillColor: const Color.fromARGB(255, 248, 248, 248),
                          contentPadding:
                              const EdgeInsets.symmetric(horizontal: 16.0),
                          focusedBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(12.0),
                            borderSide: const BorderSide(
                              color: Color.fromARGB(255, 14, 63, 102),
                              width: 2.0,
                            ),
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(12.0),
                            borderSide: const BorderSide(
                              color: Color.fromARGB(255, 14, 63, 102),
                              width: 1.0,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                  const SizedBox(width: 10),
                  Container(
                    width: 40,
                    height: 40,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(12),
                      border: Border.all(
                        color: const Color.fromARGB(255, 14, 63, 102),
                        width: 1.5,
                      ),
                    ),
                    child: IconButton(
                      icon: SvgPicture.asset(Assets.icons.sort.path),
                      onPressed: () {},
                      padding: const EdgeInsets.all(8),
                    ),
                  ),
                  const SizedBox(width: 8),
                  Container(
                    width: 40,
                    height: 40,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(12),
                      border: Border.all(
                        color: const Color.fromARGB(255, 14, 63, 102),
                        width: 1.5,
                      ),
                    ),
                    child: IconButton(
                      icon: SvgPicture.asset(Assets.icons.location.path),
                      onPressed: () {},
                      padding: const EdgeInsets.all(8),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
        backgroundColor: Colors.white,
      ),
      body: Center(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.fromLTRB(0, 20, 0, 0),
              child: SizedBox(
                width: 340,
                height: 60,
                child: Stack(
                  clipBehavior: Clip.none,
                  children: [
                    Positioned(
                      left: selectedIndex==0?10:0,
                      child: buildToggleButton(
                        text: 'list',
                        isSelected: selectedIndex == 1,
                        onTap: () => setState(() => selectedIndex = 1),
                        borderRadius: BorderRadius.only(
                          topLeft: const Radius.circular(12),
                          bottomLeft: const Radius.circular(12),
                          topRight: selectedIndex == 1
                              ? const Radius.circular(12)
                              : Radius.zero,
                          bottomRight: selectedIndex == 1
                              ? const Radius.circular(12)
                              : Radius.zero,
                        ),
                      ),
                    ),
                    Positioned(
                      right: selectedIndex==1?1:0,
                      child: buildToggleButton(
                        text: 'map',
                        isSelected: selectedIndex == 0,
                        onTap: () => setState(() => selectedIndex = 0),
                        borderRadius: BorderRadius.only(
                          topRight: const Radius.circular(12),
                          bottomRight: const Radius.circular(12),
                          topLeft: selectedIndex == 0
                              ? const Radius.circular(12)
                              : Radius.zero,
                          bottomLeft: selectedIndex == 0
                              ? const Radius.circular(12)
                              : Radius.zero,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildToggleButton({
    required String text,
    required bool isSelected,
    required VoidCallback onTap,
    required BorderRadius borderRadius,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 170,
        height: 60,
        decoration: BoxDecoration(
          borderRadius: borderRadius,
          color: isSelected
              ? const Color.fromARGB(255, 14, 63, 102)
              : const Color.fromARGB(255, 234, 234, 233),
          boxShadow: isSelected
              ? [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.2),
                    spreadRadius: 1,
                    blurRadius: 4,
                    offset: const Offset(0, 2),
                  )
                ]
              : null,
        ),
        alignment: Alignment.center,
        child: Row(
          children: [
            Text(
              text,
              style: TextStyle(
                color: isSelected ? Colors.white : Colors.black87,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    );
  }
}