import 'package:flutter/material.dart';

class ArtikelPage extends StatelessWidget {
  final String title;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pushReplacementNamed(context, '/home');
          },
        ),
        backgroundColor: Colors.brown,
        title: Text(title),
      ),
      body: ListView(
        padding: EdgeInsets.all(16.0),
        children: [
          ArtikelCard(
            title:
                'Panduan Penyiraman Otomatis untuk Tanaman Cabai: Kelembaban Tanah Optimal',
            description:
                'Tanaman cabai memerlukan kelembaban tanah yang optimal untuk pertumbuhan dan produktivitas maksimal, yaitu antara 60% hingga 80%. Kelembaban di bawah 60% dapat menghambat pertumbuhan, sementara di atas 80% meningkatkan risiko penyakit jamur dan masalah drainase. Sistem penyiraman otomatis dapat menjaga kelembaban tanah dalam rentang optimal ini dengan menggunakan sensor kelembaban yang terhubung dengan pengontrol dan sistem irigasi. Pengontrol akan memulai penyiraman saat kelembaban turun di bawah 60% dan berhenti saat mencapai 80%, memastikan efisiensi penggunaan air, pertumbuhan optimal, dan pengurangan risiko penyakit. Implementasi teknologi ini mendukung pertanian modern dan berkelanjutan dengan mengurangi beban kerja dan meningkatkan hasil panen.',
            imageUrl: 'assets/images/artikel1.jpg',
          ),
          SizedBox(height: 16.0),
          ArtikelCard(
            title:
                'Panduan Penyiraman Otomatis untuk Tanaman Tomat: Menjaga Kelembaban Tanah Optimal untuk Hasil Terbaik',
            description:
                'Tanaman tomat memerlukan kelembaban tanah yang tepat untuk mencapai pertumbuhan dan produksi buah yang optimal, dengan tingkat kelembaban tanah yang ideal berada antara 65% hingga 85%. Kelembaban di bawah 65% dapat menyebabkan stres air pada tanaman, menghambat pertumbuhan, dan mengurangi hasil buah, sementara kelembaban di atas 85% dapat meningkatkan risiko penyakit jamur dan masalah drainase. Sistem penyiraman otomatis dapat memastikan bahwa kelembaban tanah tetap dalam rentang optimal ini dengan menggunakan sensor kelembaban yang terhubung ke pengontrol dan sistem irigasi. Pengontrol akan mengaktifkan penyiraman ketika kelembaban tanah turun di bawah 65% dan menghentikannya saat mencapai 85%, menjaga efisiensi penggunaan air dan kesehatan tanaman. Dengan demikian, penerapan teknologi penyiraman otomatis ini tidak hanya mendukung pertanian yang efisien dan berkelanjutan tetapi juga membantu petani mencapai hasil panen tomat yang lebih baik dan konsisten.',
            imageUrl: 'assets/images/artikel2.jpg',
          ),
          // Tambahkan ArtikelCard lainnya sesuai kebutuhan
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Image.asset(
              'assets/images/logo.png', // Ganti dengan path gambar yang sesuai
              height: 40, // Sesuaikan tinggi gambar
            ),
            label: '', // Biarkan label kosong agar gambar berada di tengah
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.article),
            label: 'Artikel',
          ),
        ],
        onTap: (int index) {
          switch (index) {
            case 2:
              // Navigasi ke halaman artikel
              Navigator.pushReplacementNamed(context, '/artikel');
              break;
            case 1:
              // Tidak ada tindakan khusus karena gambar di tengah tidak mempunyai fungsi navigasi
              break;
            case 0:
              // Navigasi ke halaman beranda
              Navigator.pushReplacementNamed(context, '/home');
              break;
          }
        },
      ),
    );
  }
}

class ArtikelCard extends StatefulWidget {
  final String title;
  final String description;
  final String imageUrl;

  const ArtikelCard({
    Key? key,
    required this.title,
    required this.description,
    required this.imageUrl,
  }) : super(key: key);

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

class _ArtikelCardState extends State<ArtikelCard> {
  bool isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4.0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          ClipRRect(
            borderRadius: BorderRadius.vertical(top: Radius.circular(10.0)),
            child: Image.asset(
              widget.imageUrl,
              height: 200,
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  widget.title,
                  style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
                ),
                SizedBox(height: 8.0),
                Text(
                  isExpanded
                      ? widget.description
                      : widget.description.substring(0, 100) + '...',
                  style: TextStyle(fontSize: 16.0),
                ),
                SizedBox(height: 8.0),
                GestureDetector(
                  onTap: () {
                    setState(() {
                      isExpanded = !isExpanded;
                    });
                  },
                  child: Text(
                    isExpanded ? 'Show Less' : 'Read More',
                    style: TextStyle(
                      fontSize: 16.0,
                      fontWeight: FontWeight.bold,
                      color: Color.fromARGB(255, 109, 66, 5),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}