import 'package:flutter/material.dart';
import 'package:turquessa_mesas_hoster/utils/widgets/custom_appbar.dart';
import 'package:turquessa_mesas_hoster/mvvm/views/home/categorias_navbar.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    super.initState();
  }

  handleTap() {
    print('Tapped');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: CustomScrollView(
          slivers: [
            SliverAppBar(
              floating: true,
              expandedHeight: 200, // Ajusta la altura para acomodar la imagen
              flexibleSpace: FlexibleSpaceBar(
                background: Image.asset(
                  'assets/Turquessa.png',
                  fit: BoxFit.cover,
                ),
              ),
              bottom: PreferredSize(
                preferredSize:
                    Size.fromHeight(120), // Altura del contenido adicional
                child: Container(
                  color: Color.fromARGB(255, 47, 208, 229),
                  padding:
                      const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                  child: Row(
                    children: [
                      Container(
                        width: 80,
                        height: 80,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(12),
                        ),
                        child: Center(
                          child: Image.asset('assets/Turquessa.png'),
                        ),
                      ),
                      const SizedBox(width: 20),
                      const Text(
                        'Turquessa',
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 26,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      const SizedBox(width: 15),
                      Container(
                        padding: const EdgeInsets.all(8),
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          border: Border.all(color: Colors.white, width: 2),
                        ),
                        child: const Icon(Icons.info,
                            color: Colors.white, size: 20),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            SliverList(delegate: SliverChildBuilderDelegate((context, index) {
              return Column(
                children: [
                  CategoriasNavBar(),
                  Container(
                    width: double.infinity,
                    padding: const EdgeInsets.symmetric(
                        horizontal: 20, vertical: 10),
                    child: const Text(
                      "Turquessa-Coffee",
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 28,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  _buildBurgerItem(
                      "1. Machiatto Vainilla",
                      "Café Colombiano selecionado, hojas selectivas frescas y Espuma de vainilla...",
                      "MXN 115.00",
                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/iwf7MocBl2Kb5Wzzl7xHjPyQ99OljQH.jpg"),
                  const Divider(color: Colors.grey, height: 1),
                  _buildBurgerItem(
                      "2. Cappuccino Simple",
                      "Solo café, leche y espuma de leche",
                      "MXN 90.00",
                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/qgoqrqz8pO9UBN7P412Cxtz_2n2LQy_O.jpg"),
                  const Divider(color: Colors.grey, height: 1),
                  _buildBurgerItem(
                      "3. Frappé de Cajeta",
                      "Café, leche, cajeta y hielo",
                      "MXN 130.00",
                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/Z6GgNgittxZpqN7qj6ub9_sKHZxUn8i0.png"),
                  const Divider(color: Colors.grey, height: 1),
                  _buildBurgerItem(
                      "1. Machiatto Vainilla",
                      "Café Colombiano selecionado, hojas selectivas frescas y Espuma de vainilla...",
                      "MXN 115.00",
                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/iwf7MocBl2Kb5Wzzl7xHjPyQ99OljQH.jpg"),
                  const Divider(color: Colors.grey, height: 1),
                  _buildBurgerItem(
                      "2. Cappuccino Simple",
                      "Solo café, leche y espuma de leche",
                      "MXN 90.00",
                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/qgoqrqz8pO9UBN7P412Cxtz_2n2LQy_O.jpg"),
                  const Divider(color: Colors.grey, height: 1),
                  _buildBurgerItem(
                      "3. Frappé de Cajeta",
                      "Café, leche, cajeta y hielo",
                      "MXN 130.00",
                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/Z6GgNgittxZpqN7qj6ub9_sKHZxUn8i0.png"),
                  const Divider(color: Colors.grey, height: 1),
                  _buildBurgerItem(
                      "1. Machiatto Vainilla",
                      "Café Colombiano selecionado, hojas selectivas frescas y Espuma de vainilla...",
                      "MXN 115.00",
                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/iwf7MocBl2Kb5Wzzl7xHjPyQ99OljQH.jpg"),
                  const Divider(color: Colors.grey, height: 1),
                  _buildBurgerItem(
                      "2. Cappuccino Simple",
                      "Solo café, leche y espuma de leche",
                      "MXN 90.00",
                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/qgoqrqz8pO9UBN7P412Cxtz_2n2LQy_O.jpg"),
                  const Divider(color: Colors.grey, height: 1),
                  _buildBurgerItem(
                      "3. Frappé de Cajeta",
                      "Café, leche, cajeta y hielo",
                      "MXN 130.00",
                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/Z6GgNgittxZpqN7qj6ub9_sKHZxUn8i0.png"),
                  _buildBurgerItem(
                      "1. Machiatto Vainilla",
                      "Café Colombiano selecionado, hojas selectivas frescas y Espuma de vainilla...",
                      "MXN 115.00",
                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/iwf7MocBl2Kb5Wzzl7xHjPyQ99OljQH.jpg"),
                  const Divider(color: Colors.grey, height: 1),
                  _buildBurgerItem(
                      "2. Cappuccino Simple",
                      "Solo café, leche y espuma de leche",
                      "MXN 90.00",
                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/qgoqrqz8pO9UBN7P412Cxtz_2n2LQy_O.jpg"),
                  const Divider(color: Colors.grey, height: 1),
                  _buildBurgerItem(
                      "3. Frappé de Cajeta",
                      "Café, leche, cajeta y hielo",
                      "MXN 130.00",
                      "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/Z6GgNgittxZpqN7qj6ub9_sKHZxUn8i0.png"),
                ],
              );
            }))
          ],
        ));
  }
}

Widget _buildBurgerItem(
    String titulo, String descripcion, String precio, String imageUrl) {
  return Padding(
    padding: const EdgeInsets.symmetric(vertical: 20),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const SizedBox(width: 20),
        ClipRRect(
          borderRadius: BorderRadius.circular(8),
          child: Image.network(
            imageUrl,
            width: 120,
            height: 120,
            fit: BoxFit.cover,
          ),
        ),
        const SizedBox(width: 20),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                titulo,
                style: const TextStyle(
                  color: Colors.black,
                  fontSize: 22,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 10),
              Text(
                descripcion,
                style: const TextStyle(
                  color: Colors.grey,
                  fontSize: 16,
                ),
              ),
              const SizedBox(height: 20),
              Text(
                precio,
                style: const TextStyle(
                  color: Colors.black,
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ),
        const SizedBox(width: 20),
      ],
    ),
  );
}