import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_html/flutter_html.dart';

class ListPustakaDetailScreen extends StatefulWidget {
  final String title;
  final String imagePath;
  final String paragraphs;
  final String filepath;

  const ListPustakaDetailScreen({
    super.key,
    required this.title,
    required this.imagePath,
    required this.paragraphs,
    required this.filepath,
  });

  @override
  _ListDetailScreenState createState() => _ListDetailScreenState();
}

class _ListDetailScreenState extends State<ListPustakaDetailScreen> {
  late List<bool> _readStatus;
  String _htmlContent = '';

  @override
  void initState() {
    super.initState();
    _readStatus = List.generate(widget.paragraphs.length, (index) => false);
    loadHtml();
  }

  void _toggleReadStatus(int index) {
    setState(() {
      _readStatus[index] = !_readStatus[index];
    });
  }

  Future<void> loadHtml() async {
    String html = await DefaultAssetBundle.of(
      context,
    ).loadString(widget.filepath);

    html = html.replaceAllMapped(
      RegExp(r'<div class="gizi-grid">(.*?)</div>', dotAll: true),
      (match) => '<gizi-grid>${match.group(1)}</gizi-grid>',
    );
    setState(() {
      _htmlContent = html;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: Color.fromARGB(225, 79, 76, 182),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            height: 10,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(40),
                  bottomRight: Radius.circular(40),
                ),
                color: Color.fromARGB(225, 79, 76, 182),
              ),
            ),
          ),

          // Padding(
          //   padding: const EdgeInsets.all(20.0),
          //   child: Row(
          //     crossAxisAlignment: CrossAxisAlignment.start,
          //     children: [
          //       Image.asset(
          //         widget.imagePath,
          //         width: 100,
          //         height: 100,
          //         fit: BoxFit.cover,
          //       ),
          //       const SizedBox(width: 16),
          //       Expanded(
          //         child: Center(
          //           child: Text(
          //             widget.title,
          //             style: const TextStyle(
          //               fontSize: 22,
          //               fontWeight: FontWeight.bold,
          //               color: Colors.black,
          //             ),
          //           ),
          //         ),
          //       ),
          //     ],
          //   ),
          // ),
          const SizedBox(height: 0),
          Expanded(
            child: SingleChildScrollView(
              padding: const EdgeInsets.only(left: 18.0, right: 18, bottom: 18),
              child:
                  // ListView.builder(
                  //   itemCount: widget.paragraphs.length,
                  //   itemBuilder: (context, index) {
                  //     return
                  //     Padding(
                  //       padding: const EdgeInsets.only(bottom: 16.0),
                  //       child: Row(
                  //         crossAxisAlignment: CrossAxisAlignment.start,
                  //         children: [
                  //           Expanded(
                  //             child:
                  //             // Text(
                  //             // widget.paragraphs[index] +
                  //             // style: TextStyle(color: Colors.black),
                  //             Html(
                  //               // style: {
                  //               //   "body": Style(
                  //               //     color: const Color.fromRGBO(0, 0, 0, 1),
                  //               //   ),
                  //               // },
                  //               data:
                  //                   widget.paragraphs +
                  //                   """
                  //                     <html>
                  //                       <!-- Text between angle brackets is an HTML tag and is not displayed.
                  //                       Most tags, such as the HTML and /HTML tags that surround the contents of
                  //                       a page, come in pairs; some tags, like HR, for a horizontal rule, stand
                  //                       alone. Comments, such as the text you're reading, are not displayed when
                  //                       the Web page is shown. The information between the HEAD and /HEAD tags is
                  //                       not displayed. The information between the BODY and /BODY tags is displayed.-->
                  //                       <head>
                  //                       <title>Enter a title, displayed at the top of the window.</title>
                  //                       </head>
                  //                       <!-- The information between the BODY and /BODY tags is displayed.-->
                  //                       <body>
                  //                       <h1>Enter the main heading, usually the same as the title.</h1>
                  //                       <p>Be <b>bold</b> in stating your key points. Put them in a list: </p>
                  //                       <ul>
                  //                       <li>The first item in your list</li>
                  //                       <li>The second item; <i>italicize</i> key words</li>
                  //                       </ul>
                  //                       <p>Improve your image by including an image. </p>
                  //                       <p><img src="http://www.mygifs.com/CoverImage.gif" alt="A Great HTML Resource"></p>
                  //                       <p>Add a link to your favorite <a href="https://www.dummies.com/">Web site</a>.
                  //                       Break up your page with a horizontal rule or two. </p>
                  //                       <hr>
                  //                       <p>Finally, link to <a href="page2.html">another page</a> in your own Web site.</p>
                  //                       <!-- And add a copyright notice.-->
                  //                       <p>© Wiley Publishing, 2011</p>
                  //                       </body>
                  //                     </html>
                  //                 """,
                  //             ),
                  //           ),
                  //           // ),
                  //           // Checkbox(
                  //           //   value: _readStatus[index],
                  //           //   onChanged: (bool? value) {
                  //           //     _toggleReadStatus(index);
                  //           //   },
                  //           // ),
                  //         ],
                  //       ),
                  //     );
                  //   },
                  // ),
                  htmlBody(),
            ),
          ),
        ],
      ),
      // ),
    );
  }

  Html htmlBody() {
    return Html(
      style: {"body": Style(color: const Color.fromRGBO(0, 0, 0, 1))},
      // data: widget.paragraphs,
      data: _htmlContent,
      extensions: [
        TagExtension(
          tagsToExtend: {"img"},
          builder: (ExtensionContext context) {
            final attrs = context.attributes;
            final src = attrs['src'] ?? '';

            if (src.isNotEmpty) {
              if (src.startsWith('assets/html/')) {
                return Image.asset(
                  src,
                  width: 100,
                  errorBuilder:
                      (context, error, stackTrace) =>
                          const Text('Image not found'),
                );
              } else if (!src.startsWith('http')) {
                return Image.asset(
                  'assets/images/$src',
                  width: 100,
                  errorBuilder:
                      (context, error, stackTrace) =>
                          const Text('Image not found'),
                );
              } else {
                return Image.network(
                  src,
                  width: 100,
                  errorBuilder:
                      (context, error, stackTrace) =>
                          const Text('Image failed to load'),
                );
              }
            }
            return const SizedBox();
          },
        ),
        TagExtension(
          tagsToExtend: {"gizi-grid"},
          builder: (context) {
            final spans = context.inlineSpanChildren ?? [];

            final widgets =
                spans.map((span) {
                  if (span is WidgetSpan) return span.child;
                  return const SizedBox();
                }).toList();

            return Wrap(
              spacing: 12,
              runSpacing: 12,
              children:
                  widgets.map((child) {
                    return SizedBox(width: 160, child: child);
                  }).toList(),
            );
          },
        ),
      ],
    );
  }
}