import 'package:flutter/material.dart';

import '../l10n/app_localizations.dart';

/// 8 sütun × 4 satır ekran oranı buton ızgarası.
///
/// Buton (sütun `b`, satır `a`) etiketi `"$a:$b"` → hedef boyut
/// `W/b × H/a` (a dikeyi, b yatayı böler). Sol-üst hücre (1:1) boş
/// placeholder — 1:1 yok (title bar çift tık zaten tam ekran).
class WindowSizeSelector extends StatelessWidget {
  final Future<Size?> Function() workArea;
  final void Function(int rows, int cols, Size work) onPick;

  const WindowSizeSelector({
    super.key,
    required this.workArea,
    required this.onPick,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(AppLocalizations.of(context)!.sizeSection,
            style: const TextStyle(color: Colors.white70, fontSize: 13)),
        const SizedBox(height: 4),
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              for (var a = 1; a <= 4; a++)
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    for (var b = 1; b <= 8; b++)
                      Padding(
                        padding: const EdgeInsets.only(right: 4, bottom: 4),
                        child: a == 1 && b == 1
                            ? const SizedBox(width: 46, height: 26)
                            : GestureDetector(
                                onTap: () async {
                                  final work = await workArea();
                                  if (work != null) onPick(a, b, work);
                                },
                                child: Container(
                                  width: 46,
                                  height: 26,
                                  decoration: BoxDecoration(
                                    color: Colors.white10,
                                    borderRadius: BorderRadius.circular(4),
                                  ),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '$a:$b',
                                    style: const TextStyle(
                                        color: Colors.white, fontSize: 11),
                                  ),
                                ),
                              ),
                      ),
                  ],
                ),
            ],
          ),
        ),
      ],
    );
  }
}