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';

const List<Map<String, dynamic>> items = [
  {
    'titulo': 'Hamburguesa de res',
    'descripcion': 'Hamburguesa de res con queso cheddar',
    'precio': '\$ 120.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'titulo': 'Hamburguesa de pollo',
    'descripcion': 'Hamburguesa de pollo con queso cheddar',
    'precio': '\$ 100.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'titulo': 'Hamburguesa de res',
    'descripcion': 'Hamburguesa de res con queso cheddar',
    'precio': '\$ 120.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'titulo': 'Hamburguesa de pollo',
    'descripcion': 'Hamburguesa de pollo con queso cheddar',
    'precio': '\$ 100.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'titulo': 'Hamburguesa de pollo',
    'descripcion': 'Hamburguesa de pollo con queso cheddar',
    'precio': '\$ 100.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'titulo': 'Hamburguesa de pollo',
    'descripcion': 'Hamburguesa de pollo con queso cheddar',
    'precio': '\$ 100.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'titulo': 'Hamburguesa de pollo',
    'descripcion': 'Hamburguesa de pollo con queso cheddar',
    'precio': '\$ 100.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'titulo': 'Hamburguesa de pollo',
    'descripcion': 'Hamburguesa de pollo con queso cheddar',
    'precio': '\$ 100.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'titulo': 'Hamburguesa de pollo',
    'descripcion': 'Hamburguesa de pollo con queso cheddar',
    'precio': '\$ 100.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'titulo': 'Hamburguesa de pollo',
    'descripcion': 'Hamburguesa de pollo con queso cheddar',
    'precio': '\$ 100.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'titulo': 'Hamburguesa de pollo',
    'descripcion': 'Hamburguesa de pollo con queso cheddar',
    'precio': '\$ 100.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
  {
    'titulo': 'Hamburguesa de pollo',
    'descripcion': 'Hamburguesa de pollo con queso cheddar',
    'precio': '\$ 100.00',
    'imageUrl':
        'https://cdn.pixabay.com/photo/2016/03/05/19/02/hamburger-1238246_960_720.jpg',
  },
];

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: [
            SliverToBoxAdapter(
              child: Container(),
            ),
            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),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            SliverPersistentHeader(
              delegate: CategoriasSliverChild(),
              pinned: true,
            ),
            SliverList(
                delegate: SliverChildBuilderDelegate(
              (context, index) {
                if (index < items.length) {
                  return Column(
                    children: [
                      _buildBurgerItem(
                          items[index]['titulo'],
                          items[index]['descripcion'],
                          items[index]['precio'],
                          items[index]['imageUrl']),
                      const Divider(
                        color: Colors.black,
                        height: 2,
                      )
                    ],
                  );
                } else {
                  return _buildBurgerItem(
                      items[index]['titulo'],
                      items[index]['descripcion'],
                      items[index]['precio'],
                      items[index]['imageUrl']);
                }
              },
              childCount: items.length,
            ))
          ],
        ));
  }
}

class CategoriasSliverChild extends SliverPersistentHeaderDelegate {
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return SingleChildScrollView(
        scrollDirection: Axis.horizontal, child: CategoriasNavBar());
  }

  @override
  double get maxExtent => 120.0;

  @override
  double get minExtent => 120.0;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}

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),
      ],
    ),
  );
}