import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:golden_toolkit/golden_toolkit.dart';
import 'package:design_system/design_system.dart';

void main() {
  themePackages();

  testGoldens('Step Indicator', (tester) async {
    final widget = (int step)=>StepIndicator(total: 3, current: step, color: Colors.blueAccent);
    final builder = GoldenBuilder.column()
      ..addScenario('step -1', widget(-1))
      ..addScenario('step 0', widget(0))
      ..addScenario('step 1', widget(1))
      ..addScenario('step 2', widget(2))
      ..addScenario('step 3', widget(3))
      ..addScenario('step 4', widget(4));
    await tester.pumpWidgetBuilder(builder.build());
    await screenMatchesGolden(tester, 'step_indicator');
  });

  testGoldens('Progress Bar - Small', (tester) async {
    final widget = (double value, double max) => ProgressBar(max: max, value: value, height: 24, textSize: 16, textSecondarySize: 12, backgroundColor: Colors.blueGrey, foregroundColor: Colors.blueAccent, textColor: Colors.black87);

    final builder = GoldenBuilder.column()
      ..addScenario('full', widget(100, 100))
      ..addScenario('empty', widget(0, 100))
      ..addScenario('half', widget(75, 150))
      ..addScenario('overflowing', widget(200, 150))
    //..addScenario('negative', widget(-20, 83))
      ..addScenario('tiny value', widget(2.15, 150));
    await tester.pumpWidgetBuilder(builder.build());
    await screenMatchesGolden(tester, 'progress_bar_small');
  });

  testGoldens('Progress Bar - Large', (tester) async {
    final widget = (double value, double max) => ProgressBar(max: max, value: value, height: 83, textSize: 40, textSecondarySize: 24, backgroundColor: Colors.blueGrey, foregroundColor: Colors.blueAccent, textColor: Colors.black87);

    final builder = GoldenBuilder.grid(columns: 3, widthToHeightRatio: 1)
      ..addScenario('full', widget(100, 100))
      ..addScenario('empty', widget(0, 100))
      ..addScenario('half', widget(75, 150))
      ..addScenario('overflowing', widget(200, 150))
      ..addScenario('tiny value', widget(2.15, 150));
    await tester.pumpWidgetBuilder(builder.build());
    await screenMatchesGolden(tester, 'progress_bar_large');
  });

  testGoldens('Text Field', (tester) async {

    final builder = GoldenBuilder.grid(columns: 3, widthToHeightRatio: 1)
      ..addScenario('basic', SizedBox(height: 70, width: 250, child: CustomTextField()))
      ..addScenario('hint', SizedBox(height: 70, width: 250, child: CustomTextField(hint: "type something")))
      ..addScenario('label', SizedBox(height: 100, width: 250, child: CustomTextField(hint: "type something", label: "text input")))
      ..addScenario('numeric', SizedBox(height: 70, width: 250, child: CustomTextField(numeric: true)))
      ..addScenario('password', SizedBox(height: 70, width: 250, child: CustomTextField(showPassword: false)))
      ..addScenario('multiline', SizedBox(height: 200, width: 250, child: CustomTextField(lines: 4)));

    await tester.pumpWidgetBuilder(builder.build());
    await screenMatchesGolden(tester, 'textfield');
  });

  testGoldens('Primary Button', (tester) async {
    final widget = ({onPressed, text}) => SizedBox(
        height: 70, width: 250,
        child:PrimaryButton(onPressed: onPressed, text: text, color: Colors.blueAccent)
    );

    final builder = GoldenBuilder.grid(columns: 2, widthToHeightRatio: 1)
      ..addScenario('empty', SizedBox(height: 70, width: 250, child: PrimaryButton(onPressed: ()=>{}, text: "", color: Colors.blueAccent)))
      ..addScenario('basic', SizedBox(height: 70, width: 250, child: PrimaryButton(onPressed: ()=>{}, text: "press me", color: Colors.blueAccent)))
      ..addScenario('round', SizedBox(height: 70, width: 250, child: PrimaryButton(onPressed: ()=>{}, radius: 100, text: "press me", color: Colors.blueAccent)))
      ..addScenario('small', SizedBox(height: 70, width: 250, child: PrimaryButton(onPressed: ()=>{}, width: 100, text: "press me", color: Colors.blueAccent)));

    await tester.pumpWidgetBuilder(builder.build());

    await screenMatchesGolden(tester, 'primary_button');
  });

  testGoldens('Text Button', (tester) async {
    final tapTarget = Key("tap-target");

    final builder = GoldenBuilder.column()
      ..addScenario('empty', CustomTextButton(onPressed: ()=>{}, text: ""))
      ..addScenario('basic', CustomTextButton(onPressed: ()=>{}, text: "press me"))
      ..addScenario('tapped', CustomTextButton(onPressed: ()=>{}, text: "press me", key: tapTarget))
      ..addScenario('large text', CustomTextButton(onPressed: ()=>{}, text: "press me", size: 40, weight: FontWeight.w500))
      ..addScenario('small text', CustomTextButton(onPressed: ()=>{}, text: "press me", size: 10))
      ..addScenario('colored', CustomTextButton(onPressed: ()=>{}, text: "press me", color: Colors.blueAccent));
    await tester.pumpWidgetBuilder(builder.build());
    await tester.tap(find.byKey(tapTarget));
    await tester.pump();
    await screenMatchesGolden(tester, 'text_button');
  });

  testGoldens('Money Text', (tester) async {
    final builder = GoldenBuilder.column()
      ..addScenario('basic', MoneyText(text: "29.13€", size: 20, color: Colors.blueAccent))
      ..addScenario('without cents', MoneyText(text: "50€", size: 20, color: Colors.blueAccent))
      ..addScenario('different sizes', MoneyText(text: "29.13€", size: 30, secondarySize: 15, color: Colors.blueAccent))
      ..addScenario('different sizes without cents', MoneyText(text: "50€", size: 30, secondarySize: 15, color: Colors.blueAccent));

    await tester.pumpWidgetBuilder(builder.build());

    await screenMatchesGolden(tester, 'money_text');
  });

  testGoldens('Secondary Button', (tester) async {
    final widget = ({onPressed, text}) => SizedBox(
        height: 70, width: 250,
        child:SecondaryButton(onPressed: onPressed, text: text)
    );

    final builder = GoldenBuilder.grid(columns: 3, widthToHeightRatio: 1)
      ..addScenario('empty', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, text: "")))
      ..addScenario('text', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, text: "press me")))
      ..addScenario('icon', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, icon: Icons.account_circle_outlined)))
      ..addScenario('colored', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, text: "press me", color: Colors.blueAccent,)))
      ..addScenario('small', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, width: 100, text: "press me")))
      ..addScenario('round', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, radius: 100, text: "press me", color: Colors.blueAccent,)));

    await tester.pumpWidgetBuilder(builder.build());

    await screenMatchesGolden(tester, 'secondary_button');
  });

  final snackbarTest = ({message, type, testName}) {
    testGoldens('Snackbar $testName', (tester) async {
      const Key tapTarget = Key('tap-target');

      final widget = () =>
        SizedBox(
          width: 800,
          height: 600,
          child: MaterialApp(
            home: Scaffold(
              body: Builder(
                builder: (BuildContext context) {
                  return GestureDetector(
                    onTap: () {
                      ScaffoldMessenger.of(context).showSnackBar(
                        CustomSnackBar(
                          message: message,
                          type: type,
                        ).build(context)
                      );
                    },
                    behavior: HitTestBehavior.opaque,
                    key: tapTarget,
                  );
                }
              ),
            ),
          ),
        );

      final builder = DeviceBuilder()
        ..overrideDevicesForAllScenarios(devices: [
          Device(size: Size(750, 550), name: 'base')
        ])
        ..addScenario(name: testName, widget: widget());

      await tester.pumpWidgetBuilder(builder.build());
      await tester.tap(find.byKey(tapTarget));

      await screenMatchesGolden(tester, 'snackbar/$testName');
    });
  };

  final shortText = "Mensaje de prueba";
  final longText = "Mensaje de prueba largo para comprobar los casos en los que el texto ocupa varias líneas";

  snackbarTest(message: "", type: null, testName: "default_empty");
  snackbarTest(message: shortText, type: null, testName: "default");
  snackbarTest(message: longText, type: null, testName: "default_long_text");
  snackbarTest(message: "", type: MessageType.info, testName: "info_empty");
  snackbarTest(message: shortText, type: MessageType.info, testName: "info");
  snackbarTest(message: longText, type: MessageType.info, testName: "info_long_text");
  snackbarTest(message: "", type: MessageType.success, testName: "success_empty");
  snackbarTest(message: shortText, type: MessageType.success, testName: "success");
  snackbarTest(message: longText, type: MessageType.success, testName: "success_long_text");
  snackbarTest(message: "", type: MessageType.warning, testName: "warning_empty");
  snackbarTest(message: shortText, type: MessageType.warning, testName: "warning");
  snackbarTest(message: longText, type: MessageType.warning, testName: "warning_long_text");
  snackbarTest(message: "", type: MessageType.error, testName: "error_empty");
  snackbarTest(message: shortText, type: MessageType.error, testName: "error");
  snackbarTest(message: longText, type: MessageType.error, testName: "error_long_text");

  testGoldens('Dropdown', (tester) async {
    final List<Widget> emptyList = [];
    final List<Widget> shortList = [Text("A"), Text("B"), Text("C")];

    final builder = GoldenBuilder.column()
      ..addScenario('empty', CustomDropdown(items: emptyList, onChanged: (_)=>{}, width: 200))
      ..addScenario('initial value', CustomDropdown(items: shortList, value: 1, onChanged: (_)=>{}, width: 300))
      ..addScenario('hint', CustomDropdown(items: shortList, hint: "choose an option", onChanged: (_)=>{}))
      ..addScenario('label', CustomDropdown(items: shortList, label: "select", onChanged: (_)=>{}, width: 200));
    await tester.pumpWidgetBuilder(builder.build());
    await screenMatchesGolden(tester, 'dropdown');
  });
}