import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_quill/flutter_quill_internal.dart';
import 'package:frontend/utils/auth_utils.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:http/http.dart' as http;

class PlaceholdersModal extends StatefulWidget {
  final List<Map<String, dynamic>> placeholders;
  const PlaceholdersModal({Key? key, required this.placeholders})
    : super(key: key);

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

class _PlaceholdersModalState extends State<PlaceholdersModal> {
  @override
  Widget build(BuildContext context) {
    String templLabel(String placeholder) {
      var label = placeholder.replaceAll('%', '').replaceAll('_', ' ');
      return label
          .split(' ')
          .map(
            (word) =>
                word.isNotEmpty
                    ? word[0].toUpperCase() + word.substring(1)
                    : '',
          )
          .join(' ');
    }

    return AlertDialog(
      backgroundColor: Colors.white,
      contentPadding: const EdgeInsets.fromLTRB(34, 30, 34, 30),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      title: Text(
        "Available Placeholders",
        style: GoogleFonts.poppins(fontSize: 15, fontWeight: FontWeight.w500),
      ),
      content: Container(
        width:
            isDesktop
                ? MediaQuery.of(context).size.width * 0.4
                : double.maxFinite,
        // Set max height so ListView knows constraints
        height: 300,
        child: ListView.builder(
          shrinkWrap: true,
          itemCount: widget.placeholders.length,
          itemBuilder: (context, index) {
            final value = widget.placeholders[index]['value'] ?? '';
            return ListTile(
              hoverColor: Colors.white,
              focusColor: Colors.white,
              title: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    templLabel(value),
                    style: GoogleFonts.poppins(
                      fontSize: 12,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  SelectableText(
                    value,
                    style: GoogleFonts.poppins(fontSize: 12),
                  ),
                ],
              ),
              // onTap: () {
              //   Navigator.of(context).pop(value);
              // },
            );
          },
        ),
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.of(context).pop(),
          child: Text("Close", style: GoogleFonts.poppins(fontSize: 12)),
        ),
      ],
    );
  }
}