import 'package:flutter/material.dart';

import '../entities/plant.dart';
import '../repositories/beet.repositories.dart';

class Sidebar extends StatelessWidget {
  final BeetRepository beetRepository;

  const Sidebar({required this.beetRepository, Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Container(
          margin: const EdgeInsets.only(top: 20),
          padding: const EdgeInsets.all(15),
          child: const Text(
            "Verfügbare Pflanzen",
            style: TextStyle(
              fontSize: 20,
              color: Colors.white,
            ),
          ),
        ),
        Container(
          padding: const EdgeInsets.all(15),
          child: const Text(
            "Platziere das Bild auf dem Beet, scrollen über den Text"
                ,
            textDirection: TextDirection.ltr,
            style: TextStyle(
              fontSize: 16,
              color: Colors.white,
            ),
          ),
        ),
        const Divider(),
        Expanded(
          child: FutureBuilder<Iterable<Plant>>(
            future: beetRepository.getAllPlants(),
            builder: (context, snapshot) {
              if (snapshot.hasError) {
                return const Text("Fehler beim Laden");
              } else if (snapshot.hasData) {
                final plants = snapshot.data!;

                return Scrollbar(
                  child: ListView.builder(
                    scrollDirection: Axis.vertical,
                    itemCount: plants.length,
                    itemBuilder: (context, index) {
                      final plant = plants.elementAt(index);
                      return Container(
                        padding: const EdgeInsets.all(5),
                        margin: const EdgeInsets.only(
                          bottom: 10,
                          top: 10,
                          right: 10,
                        ),
                        decoration: const BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.all(
                            Radius.circular(10),
                          ),
                        ),
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Draggable<Plant>(
                              data: plant,
                              feedback: Container(
                                padding: const EdgeInsets.all(8),
                                margin: const EdgeInsets.all(4),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Image.asset(
                                      plant.image.toString(),
                                      width: 100,
                                    ),
                                  ],
                                ),
                              ),
                              child: Image.asset(
                                plant.image.toString(),
                                width: 100,
                              ),
                            ),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Container(
                                  padding: const EdgeInsets.only(
                                    right: 8,
                                    left: 8,
                                    top: 8,
                                  ),
                                  child: Text(
                                    '${plant.name}  \n ${plant.supType ?? ''}',
                                    style: const TextStyle(
                                      color: Colors.black,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                ),
                                Container(
                                  padding: const EdgeInsets.all(8),
                                  child: Text(
                                    '${plant.horizontalSpace} x ${plant.verticalSpace} m',
                                    style: const TextStyle(
                                      color: Colors.black,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      );
                    },
                  ),
                );
              } else if (snapshot.connectionState == ConnectionState.waiting) {
                return const Center(
                  child: CircularProgressIndicator(),
                );
              } else {
                return const Text('Keine Pflanzen gefunden');
              }
            },
          ),
        ),
      ],
    );
  }
}