import 'package:ambito/src/config/config.dart';
import 'package:ambito/src/packages/ambito_theme/ambito_theme.dart';
import 'package:ambito/src/widgets/page/base_page.dart';
import 'package:flutter/material.dart';
import 'package:screen_breakpoints/screen_breakpoints.dart';

class ErrorPage extends StatelessWidget {
  const ErrorPage({super.key});

  @override
  Widget build(BuildContext context) {
    final AmbitoTheme theme = getTheme(context);

    return BasePage().getPage(
      context,
      Center(
        child: Padding(
          padding: context.breakpoint.padding,
          child: (context.breakpoint.breakpoint == myBreakpoints.sm!.breakpoint)
              ? _smallCard(theme)
              : _normalCard(theme),
        ),
      ),
    );
  }

  Widget _normalCard(AmbitoTheme theme) {
    return SizedBox(
      width: 1152,
      child: Card(
        elevation: 0,
        color: theme.currentColorScheme.outline..withValues(alpha: .1),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Expanded(
              child: Padding(
                padding: const EdgeInsets.all(20),
                child: _textPart(theme),
              ),
            ),
            _imagePartNormal(theme),
          ],
        ),
      ),
    );
  }

  Widget _smallCard(AmbitoTheme theme) {
    return Card(
      elevation: 0,
      color: theme.currentColorScheme.outline..withValues(alpha: .1),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          _imagePartSmall(theme),
          Padding(
            padding: EdgeInsets.all(10),
            child: _textPart(theme),
          ),
        ],
      ),
    );
  }

  Widget _imagePartNormal(AmbitoTheme theme) {
    return Container(
      width: 300,
      height: 320,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        image: const DecorationImage(
          image: AssetImage('images/measure/ansitzstangen.jpg'),
          fit: BoxFit.cover,
        ),
      ),
      child: const SizedBox(),
    );
  }

  Widget _imagePartSmall(AmbitoTheme theme) {
    return Container(
      width: double.infinity,
      height: 250,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        image: const DecorationImage(
          image: AssetImage('images/measure/ansitzstangen.jpg'),
          fit: BoxFit.cover,
        ),
      ),
      child: const SizedBox(),
    );
  }

  Widget _textPart(AmbitoTheme theme) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Hoppla! Da ist etwas schief gelaufen',
          style: theme.headlineMedium,
        ),
        theme.verticalSpacerSmall,
        Text(
          'Es sieht so aus, als ob das Laden der Seite nicht funktioniert hätte.',
          style: theme.bodyLarge,
        ),
        theme.verticalSpacer,
        Text(
          'Was können Sie tun?',
          style: theme.bodyLarge.copyWith(fontWeight: FontWeight.bold),
        ),
        _bulletedElement('Überprüfen Sie die URL und versuchen Sie es erneut.'),
        _bulletedElement(
            'Warten Sie einige Minuten und versuchen Sie es erneut.'),
        _bulletedElement('Gehen Sie zurück zur Startseite.'),
        _bulletedElement(
            'Kontaktieren Sie uns unter XXXXXXX, wenn Sie Hilfe benötigen.'),
        theme.verticalSpacer,
        Text(
          'Wir helfen Ihnen gerne weiter!',
          style: theme.headlineSmall,
        )
      ],
    );
  }

  Widget _bulletedElement(String text) {
    return Padding(
      padding: const EdgeInsets.only(left: 20),
      child: Row(
        children: [
          const Icon(
            Icons.circle,
            size: 8,
          ),
          const SizedBox(
            width: 8,
          ),
          Expanded(
            child: Text(text),
          ),
        ],
      ),
    );
  }
}
