import 'dart:math' as math;

import 'package:flutter/material.dart';

class GearRatioPreset {
  const GearRatioPreset({
    required this.name,
    required this.description,
    required this.ratios,
  });

  final String name;
  final String description;
  final List<double> ratios;
}

class GearRatioEditorCard extends StatefulWidget {
  const GearRatioEditorCard({
    required this.ratios,
    required this.isLoading,
    required this.onSave,
    required this.presets,
    this.errorText,
    this.onRetry,
    super.key,
  });

  final List<double> ratios;
  final bool isLoading;
  final Future<String?> Function(List<double> ratios) onSave;
  final List<GearRatioPreset> presets;
  final String? errorText;
  final VoidCallback? onRetry;

  @override
  State<GearRatioEditorCard> createState() => _GearRatioEditorCardState();
}

class _GearRatioEditorCardState extends State<GearRatioEditorCard> {
  static const double _sliderMin = 0.10;
  static const double _sliderMax = 3.90;
  static const double _sliderPivotT = 0.50;
  static const double _sliderPivotV = 1.00;
  static const Duration _animDuration = Duration(milliseconds: 280);
  static const Curve _animCurve = Cubic(0.2, 0.8, 0.2, 1.0);

  bool _isExpanded = false;
  bool _isEditing = false;
  bool _sortAscending = true;
  bool _isSaving = false;
  double _stretchFactor = 1.0;
  List<double>? _stretchBase;
  int _gearLayoutVersion = 0;

  List<double> _committed = const [];
  List<double> _draft = const [];

  @override
  void initState() {
    super.initState();
    _committed = List<double>.from(widget.ratios);
    _draft = List<double>.from(widget.ratios);
  }

  @override
  void didUpdateWidget(covariant GearRatioEditorCard oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (!_isEditing && !_listEquals(oldWidget.ratios, widget.ratios)) {
      _committed = List<double>.from(widget.ratios);
      _draft = List<double>.from(widget.ratios);
    }
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        color:
            theme.colorScheme.surfaceContainerHighest.withValues(alpha: 0.55),
        border: Border.all(
          color: theme.colorScheme.outlineVariant.withValues(alpha: 0.6),
        ),
      ),
      child: AnimatedSize(
        duration: _animDuration,
        curve: _animCurve,
        alignment: Alignment.topCenter,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Padding(
              padding: const EdgeInsets.fromLTRB(14, 12, 10, 8),
              child: Row(
                children: [
                  const Expanded(
                    child: Text(
                      'Gear Ratios',
                      style:
                          TextStyle(fontSize: 17, fontWeight: FontWeight.w700),
                    ),
                  ),
                  if (_isEditing) ...[
                    TextButton(
                      onPressed: _isSaving ? null : _onCancel,
                      child: const Text('Cancel'),
                    ),
                    FilledButton(
                      onPressed: _isSaving ? null : _onSave,
                      child: _isSaving
                          ? const SizedBox(
                              width: 16,
                              height: 16,
                              child: CircularProgressIndicator(strokeWidth: 2),
                            )
                          : const Text('Save'),
                    ),
                  ] else
                    IconButton(
                      tooltip: 'Edit ratios',
                      onPressed: (widget.isLoading || widget.errorText != null)
                          ? null
                          : _enterEditMode,
                      icon: const Icon(Icons.edit_outlined),
                    ),
                ],
              ),
            ),
            if (widget.isLoading)
              const Padding(
                padding: EdgeInsets.fromLTRB(16, 20, 16, 24),
                child: Center(child: CircularProgressIndicator()),
              )
            else if (widget.errorText != null)
              Padding(
                padding: const EdgeInsets.fromLTRB(16, 6, 16, 16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      widget.errorText!,
                      style: TextStyle(color: theme.colorScheme.error),
                    ),
                    if (widget.onRetry != null)
                      TextButton.icon(
                        onPressed: widget.onRetry,
                        icon: const Icon(Icons.refresh),
                        label: const Text('Retry'),
                      ),
                  ],
                ),
              )
            else if (_committed.isEmpty && !_isEditing)
              const Padding(
                padding: EdgeInsets.fromLTRB(16, 8, 16, 18),
                child: Text('No gear ratios found on device.'),
              )
            else ...[
              if ((_isEditing ? _draft : _committed).isNotEmpty)
                InkWell(
                  borderRadius: BorderRadius.circular(16),
                  onTap: _isEditing
                      ? null
                      : () {
                          setState(() {
                            _isExpanded = !_isExpanded;
                          });
                        },
                  child: Padding(
                    padding: const EdgeInsets.fromLTRB(14, 2, 14, 8),
                    child: AnimatedContainer(
                      duration: _animDuration,
                      curve: _animCurve,
                      height: _isExpanded ? 210 : 130,
                      child: _GearRatioGraph(
                        ratios: _isEditing ? _draft : _committed,
                        compact: !_isExpanded,
                      ),
                    ),
                  ),
                ),
              if (!_isExpanded && !_isEditing && _committed.isNotEmpty)
                Padding(
                  padding: const EdgeInsets.fromLTRB(14, 0, 14, 10),
                  child: _compactRatioStrip(context, _committed),
                ),
              AnimatedSize(
                duration: _animDuration,
                curve: _animCurve,
                alignment: Alignment.topCenter,
                child: _isExpanded && !_isEditing
                    ? Padding(
                        padding: const EdgeInsets.fromLTRB(14, 0, 14, 12),
                        child: Wrap(
                          spacing: 8,
                          runSpacing: 8,
                          children: [
                            for (var i = 0; i < _committed.length; i++)
                              _ratioChip(context, i + 1, _committed[i]),
                          ],
                        ),
                      )
                    : const SizedBox.shrink(),
              ),
              if (_isEditing) ...[
                Padding(
                  padding: const EdgeInsets.fromLTRB(14, 0, 14, 8),
                  child: Row(
                    children: [
                      const Text('Sort ascending'),
                      Switch(
                        value: _sortAscending,
                        onChanged: (value) {
                          setState(() {
                            _sortAscending = value;
                            if (_sortAscending) {
                              _sortDraft(animate: true);
                            }
                          });
                        },
                      ),
                      const Spacer(),
                      OutlinedButton.icon(
                        onPressed: _openPresetPicker,
                        icon: const Icon(Icons.tune),
                        label: const Text('Load preset'),
                      ),
                    ],
                  ),
                ),
                if (_draft.isEmpty)
                  const Padding(
                    padding: EdgeInsets.fromLTRB(14, 0, 14, 10),
                    child:
                        Text('No ratios yet. Load a preset to start editing.'),
                  ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(14, 0, 14, 8),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Stretch all: ${_stretchFactor.toStringAsFixed(2)}x',
                        style: theme.textTheme.bodyMedium,
                      ),
                      Slider(
                        min: 0.0,
                        max: 1.0,
                        value: _stretchToSlider(_stretchFactor),
                        onChangeStart: (_) {
                          _stretchBase = List<double>.from(_draft);
                        },
                        onChanged: (value) {
                          final factor = _sliderToStretch(value);
                          final base = _stretchBase ?? _draft;
                          setState(() {
                            _stretchFactor = factor;
                            _draft = base
                                .map((ratio) => _quantizeRatio(ratio * factor))
                                .toList(growable: false);
                          });
                        },
                        onChangeEnd: (_) {
                          setState(() {
                            if (_sortAscending) {
                              _sortDraft(animate: true);
                            }
                            _stretchBase = null;
                          });
                        },
                      ),
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(10, 0, 10, 12),
                  child: AnimatedSwitcher(
                    duration: _animDuration,
                    switchInCurve: _animCurve,
                    switchOutCurve: Curves.easeInCubic,
                    transitionBuilder: _snappyTransition,
                    child: Wrap(
                      key: ValueKey('editors-$_gearLayoutVersion'),
                      spacing: 8,
                      runSpacing: 8,
                      children: [
                        for (var i = 0; i < _draft.length; i++)
                          KeyedSubtree(
                            key: ValueKey('editor-${i + 1}'),
                            child: _buildGearEditor(context, i),
                          ),
                      ],
                    ),
                  ),
                ),
              ],
            ],
          ],
        ),
      ),
    );
  }

  Widget _snappyTransition(Widget child, Animation<double> animation) {
    final curved = CurvedAnimation(parent: animation, curve: _animCurve);
    return FadeTransition(
      opacity: curved,
      child: SizeTransition(
        sizeFactor: curved,
        axisAlignment: -1,
        child: child,
      ),
    );
  }

  Widget _buildGearEditor(BuildContext context, int index) {
    final ratio = _draft[index];
    final sliderValue = _valueToSlider(ratio);
    return ConstrainedBox(
      constraints: const BoxConstraints(minWidth: 230, maxWidth: 280),
      child: Container(
        padding: const EdgeInsets.fromLTRB(10, 8, 10, 4),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          color: Theme.of(context).colorScheme.surface.withValues(alpha: 0.7),
          border: Border.all(
            color: Theme.of(context)
                .colorScheme
                .outlineVariant
                .withValues(alpha: 0.6),
          ),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Text(
                  'Gear ${index + 1}',
                  style: const TextStyle(fontWeight: FontWeight.w600),
                ),
                const Spacer(),
                InkWell(
                  borderRadius: BorderRadius.circular(6),
                  onTap: () => _editRatioText(index),
                  child: Padding(
                    padding:
                        const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                    child: Text(
                      ratio.toStringAsFixed(2),
                      style: const TextStyle(
                        fontSize: 15,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  ),
                ),
              ],
            ),
            Slider(
              min: 0,
              max: 1,
              value: sliderValue,
              onChanged: (value) {
                setState(() {
                  _draft[index] = _quantizeRatio(_sliderToValue(value));
                });
              },
              onChangeEnd: (_) {
                setState(() {
                  if (_sortAscending) {
                    _sortDraft(animate: true);
                  }
                });
              },
            ),
          ],
        ),
      ),
    );
  }

  Future<void> _editRatioText(int index) async {
    final controller = TextEditingController(
      text: _draft[index].toStringAsFixed(2),
    );

    final value = await showDialog<double>(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text('Set gear ${index + 1} ratio'),
          content: TextField(
            controller: controller,
            keyboardType: const TextInputType.numberWithOptions(decimal: true),
            autofocus: true,
            decoration: const InputDecoration(hintText: 'e.g. 1.25'),
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.of(context).pop(),
              child: const Text('Cancel'),
            ),
            FilledButton(
              onPressed: () {
                final parsed = double.tryParse(controller.text.trim());
                Navigator.of(context).pop(parsed);
              },
              child: const Text('Set'),
            ),
          ],
        );
      },
    );

    if (!mounted || value == null) {
      return;
    }

    setState(() {
      _draft[index] = _quantizeRatio(value);
      if (_sortAscending) {
        _sortDraft(animate: true);
      }
    });
  }

  Future<void> _openPresetPicker() async {
    final selected = await showModalBottomSheet<GearRatioPreset>(
      context: context,
      showDragHandle: true,
      builder: (context) {
        return Padding(
          padding: const EdgeInsets.fromLTRB(12, 6, 12, 12),
          child: ListView.separated(
            itemCount: widget.presets.length,
            separatorBuilder: (_, __) => const SizedBox(height: 8),
            itemBuilder: (context, index) {
              final preset = widget.presets[index];
              return Material(
                color: Theme.of(context)
                    .colorScheme
                    .surfaceContainerHighest
                    .withValues(alpha: 0.45),
                borderRadius: BorderRadius.circular(14),
                child: InkWell(
                  borderRadius: BorderRadius.circular(14),
                  onTap: () => Navigator.of(context).pop(preset),
                  child: Padding(
                    padding: const EdgeInsets.all(12),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          preset.name,
                          style: const TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w700,
                          ),
                        ),
                        const SizedBox(height: 4),
                        Text(
                          preset.description,
                          style: Theme.of(context).textTheme.bodySmall,
                        ),
                        const SizedBox(height: 10),
                        SizedBox(
                          height: 90,
                          child: _GearRatioGraph(
                              ratios: preset.ratios, compact: true),
                        ),
                        const SizedBox(height: 8),
                        _compactRatioStrip(
                          context,
                          preset.ratios,
                          showGearLabel: false,
                        ),
                      ],
                    ),
                  ),
                ),
              );
            },
          ),
        );
      },
    );

    if (!mounted || selected == null) {
      return;
    }

    setState(() {
      _draft = selected.ratios.map(_quantizeRatio).toList(growable: false);
      if (_sortAscending) {
        _sortDraft(animate: true);
      }
    });
  }

  void _sortDraft({bool animate = false}) {
    final sorted = _sorted(_draft);
    if (animate && !_listEquals(_draft, sorted)) {
      _gearLayoutVersion++;
    }
    _draft = sorted;
  }

  void _enterEditMode() {
    setState(() {
      _isEditing = true;
      _isExpanded = true;
      _stretchFactor = 1.0;
      _stretchBase = null;
      _draft = List<double>.from(_committed);
    });
  }

  void _onCancel() {
    setState(() {
      _isEditing = false;
      _draft = List<double>.from(_committed);
      _stretchFactor = 1.0;
      _stretchBase = null;
    });
  }

  Future<void> _onSave() async {
    setState(() {
      _isSaving = true;
    });

    final message = await widget.onSave(List<double>.from(_draft));
    if (!mounted) {
      return;
    }

    setState(() {
      _isSaving = false;
      if (message == null) {
        _committed = List<double>.from(_draft);
        _isEditing = false;
      }
    });

    if (message != null) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(message)),
      );
    }
  }

  Widget _ratioChip(BuildContext context, int gear, double ratio) {
    final theme = Theme.of(context);
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(999),
        color: theme.colorScheme.surface.withValues(alpha: 0.7),
        border: Border.all(
          color: theme.colorScheme.outlineVariant.withValues(alpha: 0.6),
        ),
      ),
      child: Text('G$gear  ${ratio.toStringAsFixed(2)}'),
    );
  }

  Widget _compactRatioStrip(
    BuildContext context,
    List<double> ratios, {
    bool showGearLabel = true,
  }) {
    final theme = Theme.of(context);
    return SizedBox(
      height: 26,
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          children: [
            for (var i = 0; i < ratios.length; i++)
              Padding(
                padding: EdgeInsets.only(right: i == ratios.length - 1 ? 0 : 6),
                child: Container(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(999),
                    color: theme.colorScheme.surface.withValues(alpha: 0.7),
                    border: Border.all(
                      color: theme.colorScheme.outlineVariant
                          .withValues(alpha: 0.55),
                    ),
                  ),
                  child: Text(
                    showGearLabel
                        ? 'G${i + 1} ${ratios[i].toStringAsFixed(2)}'
                        : ratios[i].toStringAsFixed(2),
                    style: theme.textTheme.bodySmall?.copyWith(
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }

  double _quantizeRatio(double raw) {
    final clamped = raw.clamp(_sliderMin, _sliderMax);
    return ((clamped * 64).round() / 64.0).clamp(_sliderMin, _sliderMax);
  }

  List<double> _sorted(List<double> values) {
    final out = List<double>.from(values)..sort();
    return out;
  }

  bool _listEquals(List<double> a, List<double> b) {
    if (a.length != b.length) {
      return false;
    }
    for (var i = 0; i < a.length; i++) {
      if (a[i] != b[i]) {
        return false;
      }
    }
    return true;
  }

  double _sliderToValue(double t) {
    final normalized = t.clamp(0.0, 1.0);
    if (normalized <= _sliderPivotT) {
      final u = normalized / _sliderPivotT;
      return _sliderMin * math.pow(_sliderPivotV / _sliderMin, u);
    }
    final u = (normalized - _sliderPivotT) / (1 - _sliderPivotT);
    return _sliderPivotV * math.pow(_sliderMax / _sliderPivotV, u);
  }

  double _valueToSlider(double value) {
    final clamped = value.clamp(_sliderMin, _sliderMax);
    if (clamped <= _sliderPivotV) {
      final u =
          math.log(clamped / _sliderMin) / math.log(_sliderPivotV / _sliderMin);
      return (u * _sliderPivotT).clamp(0.0, 1.0);
    }
    final u = math.log(clamped / _sliderPivotV) /
        math.log(_sliderMax / _sliderPivotV);
    return (_sliderPivotT + u * (1 - _sliderPivotT)).clamp(0.0, 1.0);
  }

  double _sliderToStretch(double t) {
    return (0.6 + (1.6 - 0.6) * t).clamp(0.6, 1.6);
  }

  double _stretchToSlider(double factor) {
    return ((factor - 0.6) / (1.6 - 0.6)).clamp(0.0, 1.0);
  }
}

class _GearRatioGraph extends StatelessWidget {
  const _GearRatioGraph({required this.ratios, required this.compact});

  final List<double> ratios;
  final bool compact;

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;
    return DecoratedBox(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(14),
        color: Theme.of(context).colorScheme.surface.withValues(alpha: 0.65),
      ),
      child: Padding(
        padding: const EdgeInsets.fromLTRB(10, 10, 10, 8),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            if (!compact)
              Text(
                'Input RPM -> Output RPM',
                style: textTheme.bodySmall,
              ),
            Expanded(
              child: CustomPaint(
                painter: _GearRatioGraphPainter(
                  ratios: ratios,
                  axisColor: Theme.of(context).colorScheme.outline,
                  lineColor: Theme.of(context).colorScheme.primary,
                  textColor: Theme.of(context).colorScheme.onSurface,
                  compact: compact,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _GearRatioGraphPainter extends CustomPainter {
  const _GearRatioGraphPainter({
    required this.ratios,
    required this.axisColor,
    required this.lineColor,
    required this.textColor,
    required this.compact,
  });

  final List<double> ratios;
  final Color axisColor;
  final Color lineColor;
  final Color textColor;
  final bool compact;

  @override
  void paint(Canvas canvas, Size size) {
    if (ratios.isEmpty) {
      return;
    }

    const left = 28.0;
    const right = 10.0;
    const top = 8.0;
    const bottom = 24.0;
    final chart = Rect.fromLTWH(
      left,
      top,
      size.width - left - right,
      size.height - top - bottom,
    );

    final axisPaint = Paint()
      ..color = axisColor.withValues(alpha: 0.55)
      ..strokeWidth = 1.2;
    canvas.drawRect(chart, axisPaint..style = PaintingStyle.stroke);

    final maxRatio = ratios.reduce(math.max);
    final xMax = 120.0;
    final computedYMax = (xMax * math.max(maxRatio, 1.0)).toDouble();
    final yMax = math.min(400.0, computedYMax);

    for (var i = 1; i <= 3; i++) {
      final y = chart.bottom - (chart.height * (i / 4));
      canvas.drawLine(
        Offset(chart.left, y),
        Offset(chart.right, y),
        axisPaint..color = axisColor.withValues(alpha: 0.2),
      );
    }

    for (var i = 1; i <= 3; i++) {
      final x = chart.left + (chart.width * (i / 4));
      canvas.drawLine(
        Offset(x, chart.top),
        Offset(x, chart.bottom),
        axisPaint..color = axisColor.withValues(alpha: 0.15),
      );
    }

    for (var i = 0; i < ratios.length; i++) {
      final ratio = ratios[i];
      final p = i / math.max(1, ratios.length - 1);
      final color = Color.lerp(
        lineColor.withValues(alpha: 0.40),
        lineColor,
        p,
      )!;

      final endYValue = xMax * ratio;
      final isClipped = endYValue > yMax;
      final endX = isClipped
          ? chart.left + chart.width * (yMax / endYValue)
          : chart.right;
      final endY = isClipped
          ? chart.top
          : chart.bottom - (endYValue / yMax) * chart.height;

      final linePaint = Paint()
        ..color = color
        ..strokeWidth = 2;

      canvas.drawLine(
        Offset(chart.left, chart.bottom),
        Offset(endX, endY),
        linePaint,
      );

      if (!compact && i % 2 == 0) {
        final tp = TextPainter(
          text: TextSpan(
            text: 'G${i + 1}',
            style: TextStyle(
                fontSize: 10, color: textColor.withValues(alpha: 0.75)),
          ),
          textDirection: TextDirection.ltr,
        )..layout();
        tp.paint(
          canvas,
          Offset(
            (endX - tp.width - 2).clamp(chart.left, chart.right - tp.width),
            (endY - 10).clamp(chart.top, chart.bottom - tp.height),
          ),
        );
      }
    }

    final xLabel = TextPainter(
      text: TextSpan(
        text: 'In RPM',
        style:
            TextStyle(fontSize: 10, color: textColor.withValues(alpha: 0.75)),
      ),
      textDirection: TextDirection.ltr,
    )..layout();
    xLabel.paint(canvas, Offset(chart.right - xLabel.width, chart.bottom + 17));

    final xMinValue = TextPainter(
      text: TextSpan(
        text: '0',
        style: TextStyle(fontSize: 9, color: textColor.withValues(alpha: 0.65)),
      ),
      textDirection: TextDirection.ltr,
    )..layout();
    xMinValue.paint(canvas, Offset(chart.left, chart.bottom + 5));

    final xMaxValue = TextPainter(
      text: TextSpan(
        text: xMax.toStringAsFixed(0),
        style: TextStyle(fontSize: 9, color: textColor.withValues(alpha: 0.65)),
      ),
      textDirection: TextDirection.ltr,
    )..layout();
    xMaxValue.paint(
      canvas,
      Offset(chart.right - xMaxValue.width, chart.bottom + 5),
    );

    final yLabel = TextPainter(
      text: TextSpan(
        text: 'Out RPM',
        style:
            TextStyle(fontSize: 10, color: textColor.withValues(alpha: 0.75)),
      ),
      textDirection: TextDirection.ltr,
    )..layout();
    yLabel.paint(canvas, Offset(chart.left - 28, chart.top - 14));

    final yMinValue = TextPainter(
      text: TextSpan(
        text: '0',
        style: TextStyle(fontSize: 9, color: textColor.withValues(alpha: 0.65)),
      ),
      textDirection: TextDirection.ltr,
    )..layout();
    yMinValue.paint(
      canvas,
      Offset(chart.left - yMinValue.width - 4, chart.bottom - yMinValue.height),
    );

    final yMaxValue = TextPainter(
      text: TextSpan(
        text: yMax.toStringAsFixed(0),
        style: TextStyle(fontSize: 9, color: textColor.withValues(alpha: 0.65)),
      ),
      textDirection: TextDirection.ltr,
    )..layout();
    yMaxValue.paint(
      canvas,
      Offset(chart.left - yMaxValue.width - 4, chart.top),
    );
  }

  @override
  bool shouldRepaint(covariant _GearRatioGraphPainter oldDelegate) {
    if (oldDelegate.compact != compact ||
        oldDelegate.ratios.length != ratios.length) {
      return true;
    }
    for (var i = 0; i < ratios.length; i++) {
      if (ratios[i] != oldDelegate.ratios[i]) {
        return true;
      }
    }
    return false;
  }
}