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

class ListDetailScreen extends StatefulWidget {
  final String title;
  final String imagePath;
  final List<String> paragraphs;

  const ListDetailScreen({
    Key? key,
    required this.title,
    required this.imagePath,
    required this.paragraphs,
  }) : super(key: key);

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

class _ListDetailScreenState extends State<ListDetailScreen> {
  late List<bool> _readStatus;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(title: Text(widget.title)),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Image.asset(
                  widget.imagePath,
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                ),
                const SizedBox(width: 16),
                Expanded(
                  child: Text(
                    widget.title,
                    style: const TextStyle(
                      fontSize: 22,
                      fontWeight: FontWeight.bold,
                      color: Colors.black,
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 16),
            Expanded(
              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: Colors.black)},
                            data:
                                widget.paragraphs.toString() +
                                """
                                <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);
                        //   },
                        // ),
                      ],
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}
