import "package:client/view_models.dart";
import "package:client/widgets.dart";
import "package:flutter/material.dart";

class Sidebar extends ReusableReactiveWidget<HomeModel> {
  const Sidebar(super.model);

  @override
  Widget build(BuildContext context, HomeModel model) => DefaultTabController(
    length: 2,
    child: Card(
      clipBehavior: Clip.hardEdge,
      child: Column(
        children: [
          const SizedBox(height: 16),
          if (model.markerState != null && model.markerState != MarkerState.override) ...[
            Text(
              "Select routes",
              maxLines: 1,
              style: context.textTheme.titleLarge,
              textAlign: TextAlign.center,
            ),
            Text(
              "Or click anywhere on the map",
              maxLines: 1,
              style: context.textTheme.bodyMedium,
              textAlign: TextAlign.center,
            ),
          ],
          const SizedBox(height: 8),
          if (model.shouldShowMarkers) TabBar(
            tabs: [
              for (final (provider, _) in model.providers)
                Tab(text: provider),
            ],
          ),
          if (!model.shouldShowMarkers) Expanded(
            child: ListView(
              children: [
                if (model.pathText != null) ...[
                  for (final line in model.pathText!)
                    Text(line, style: context.textTheme.bodySmall),
                ]
                else
                  const Center(child: Text("Choose start or end location")),
              ],
            ),
          ),
          if (model.shouldShowMarkers) Expanded(
            child: TabBarView(
              children: [
                for (final (_, routesList) in model.providers)
                  ListView(
                    children: [
                      for (final route in routesList) CheckboxListTile(
                        title: Text(route.fullName, maxLines: 1),
                        subtitle: Text(
                          "${route.stops.length} stops",
                          maxLines: 1,
                        ),
                        value: model.routesToShow.contains(route.id),
                        onChanged: (value) => model.showRoute(route, shouldShow: value!),
                      ),
                    ],
                  ),
              ],
            ),
          ),
        ],
      ),
    ),
  );
}
