import 'dart:convert' show base64Decode;

import 'package:flutter/material.dart';
import 'package:fotodocumentation/controller/picture_controller.dart';

import 'package:intl/intl.dart';

import 'package:fotodocumentation/controller/base_controller.dart';
import 'package:fotodocumentation/dto/customer_dto.dart';
import 'package:fotodocumentation/l10n/app_localizations.dart';
import 'package:fotodocumentation/pages/ui_utils/component/general_error_widget.dart';
import 'package:fotodocumentation/pages/ui_utils/component/waiting_widget.dart';
import 'package:fotodocumentation/pages/ui_utils/general_style.dart';
import 'package:fotodocumentation/utils/di_container.dart';

class PictureWidget extends StatefulWidget {
  final int id;
  const PictureWidget({super.key, required this.id});

  @override
  State<PictureWidget> createState() => _PictureWidgetState();
}

class _PictureWidgetState extends State<PictureWidget> {
  PictureController get _pictureController => DiContainer.get();
  GeneralStyle get _generalStyle => DiContainer.get();

  late Future<PictureDto?> _dto;
  late DateFormat _dateFormat;
  final ScrollController _commentScrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _dateFormat = DateFormat('dd MMMM yyyy');
    _dto = _pictureController.get(id: widget.id);
  }

  @override
  void dispose() {
    _commentScrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: _generalStyle.pageBackgroundColor,
        child: Padding(
          padding: const EdgeInsets.only(top: 8.0, left: 50.0, right: 50.0, bottom: 8.0),
          child: _body(context),
        ),
      ),
    );
  }

  Widget _body(BuildContext context) {
    return FutureBuilder<PictureDto?>(
      future: _dto,
      builder: (BuildContext context, AsyncSnapshot<PictureDto?> snapshot) {
        if (snapshot.connectionState != ConnectionState.done) {
          return const WaitingWidget();
        }
        if (snapshot.hasData) {
          PictureDto? dto = snapshot.data;

          return _mainWidget(dto);
        } else if (snapshot.hasError) {
          var error = snapshot.error;
          return (error is ServerError) ? GeneralErrorWidget.fromServerError(error) : GeneralErrorWidget(error: snapshot.error.toString());
        }
        return const WaitingWidget();
      },
    );
  }

  Widget _mainWidget(PictureDto? dto) {
    if (dto == null) {
      return Text(
        AppLocalizations.of(context)!.customerWidgetNotFound,
        style: TextStyle(
          fontFamily: _generalStyle.fontFamily,
          fontWeight: FontWeight.bold,
          fontSize: 20,
          color: _generalStyle.secondaryWidgetBackgroundColor,
        ),
      );
    }

    return Card(
      margin: EdgeInsets.zero,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
      child: Padding(
        padding: const EdgeInsets.all(24.0),
        child: LayoutBuilder(
          builder: (context, constraints) {
            final isNarrow = constraints.maxWidth < 800;
            return SingleChildScrollView(
              child: isNarrow
                  ? Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        _imageWidget(dto),
                        const SizedBox(height: 32),
                        _contentWidget(dto),
                      ],
                    )
                  : Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        _imageWidget(dto),
                        const SizedBox(width: 32),
                        _contentWidget(dto),
                      ],
                    ),
            );
          },
        ),
      ),
    );
  }

  Widget _imageWidget(PictureDto dto) {
    return Image.memory(
      base64Decode(dto.image),
      fit: BoxFit.contain,
    );
  }

  Widget _contentWidget(PictureDto dto) {
    final labelStyle = TextStyle(
      fontWeight: FontWeight.normal,
      fontSize: 16,
      fontFamily: _generalStyle.fontFamily,
      color: _generalStyle.primaryTextLabelColor,
    );

    final contentStyle = TextStyle(
      fontWeight: FontWeight.bold,
      fontSize: 16,
      fontFamily: _generalStyle.fontFamily,
      color: _generalStyle.secondaryTextLabelColor,
    );

    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
      Text(
        "INFORMATIONEN",
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 44,
          fontFamily: _generalStyle.fontFamily,
          color: _generalStyle.primaryTextLabelColor,
        ),
      ),
      Padding(
        padding: const EdgeInsets.only(top: 20.0),
        child: Text(
          "APOTHEKE",
          style: labelStyle,
        ),
      ),
      Padding(
        padding: const EdgeInsets.only(top: 4.0),
        child: Text(
          "Name of apotheke",
          style: contentStyle,
        ),
      ),
      Padding(
        padding: const EdgeInsets.only(top: 20.0),
        child: Text(
          "KUNDENNUMMER",
          style: labelStyle,
        ),
      ),
      Padding(
        padding: const EdgeInsets.only(top: 4.0),
        child: Text(
          "123445587474873",
          style: contentStyle,
        ),
      ),
      Padding(
        padding: const EdgeInsets.only(top: 20.0),
        child: Text(
          "DATUM",
          style: labelStyle,
        ),
      ),
      Padding(
        padding: const EdgeInsets.only(top: 4.0),
        child: Text(
          _dateFormat.format(dto.pictureDate),
          style: contentStyle,
        ),
      ),
      Padding(
        padding: const EdgeInsets.only(top: 20.0),
        child: Text(
          "KOMMENTAR",
          style: labelStyle,
        ),
      ),
      Padding(
        padding: const EdgeInsets.only(top: 4.0),
        child: Container(
          width: 300,
          height: 150,
          decoration: BoxDecoration(
            border: Border.all(color: _generalStyle.secondaryTextLabelColor.withValues(alpha: 0.3)),
            borderRadius: BorderRadius.circular(8),
          ),
          child: Scrollbar(
            controller: _commentScrollController,
            thumbVisibility: true,
            child: SingleChildScrollView(
              controller: _commentScrollController,
              padding: const EdgeInsets.all(8.0),
              child: Text(
                dto.comment ?? "",
                style: contentStyle,
              ),
            ),
          ),
        ),
      ),
    ]);
  }
}