import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/providers/sensor_provider.dart';
import '../../../core/providers/settings_provider.dart';
import '../../theme/app_colors.dart';
import 'dashboard_slots_provider.dart';
import 'widgets/dashboard_common.dart';
import 'widgets/flag_pill.dart';
import 'widgets/sensor_tile.dart';

/// Landscape layout (requirements): main + sub sensor in the centre,
/// 5 values left, 5 values right, 4 flags along the bottom.
class DashboardHorizontal extends ConsumerWidget {
  const DashboardHorizontal({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final c = AppColors.of(context);
    final state = ref.watch(latestSensorProvider);
    final config = ref.watch(dashboardConfigProvider);
    final units = ref.watch(unitPrefsProvider);

    Widget column(int from) => SizedBox(
          width: 190,
          child: Column(
            children: [
              for (int i = from; i < from + 5; i++)
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 2),
                    child: SensorTile(
                      sensorId: config.values[i],
                      state: state,
                      units: units,
                      onLongPress: () => editDashboardValue(context, ref, i),
                    ),
                  ),
                ),
            ],
          ),
        );

    return Container(
      color: c.background,
      // SafeArea: in landscape the system navigation bar sits on a side.
      child: SafeArea(
        top: false,
        bottom: false,
        child: Padding(
          padding: const EdgeInsets.fromLTRB(8, 4, 8, 6),
          child: Column(
            children: [
              Expanded(
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    column(0),
                    const SizedBox(width: 8),
                    Expanded(
                      child: Center(child: MainGauge(state: state)),
                    ),
                    const SizedBox(width: 8),
                    column(5),
                  ],
                ),
              ),
              const SizedBox(height: 6),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 198),
                child: FlagRow(
                  state: state,
                  flagIds: config.flags,
                  onLongPress: (i) => editDashboardFlag(context, ref, i),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}