import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';

import 'package:ly/widgets/cards.dart';
import 'package:ly/widgets/letter1_dialogue.dart';
import 'package:ly/widgets/letter2_dialogue.dart';
import 'package:ly/widgets/locker_password_dialogue.dart';
import 'package:ly/widgets/locker_pictures_dialogue.dart';
import 'package:ly/widgets/proposal_dialogue.dart';
import 'package:ly/widgets/voucher.dart';

class GiftsPage extends StatefulWidget {
  const GiftsPage({super.key});

  @override
  State<GiftsPage> createState() => _GiftsPageState();
}

class _GiftsPageState extends State<GiftsPage> {
  final FirebaseFirestore _firestore = FirebaseFirestore.instance;
  final String _documentId = 'gifts_page_data';
  late DocumentReference<Map<String, dynamic>> _giftsPageData;

  Map<String, bool> _isOpened = {
    'c1': false,
    'c2': false,
    'c3': false,
    'c4': false,
    'c5': false,
    'c6': false,
  };

  @override
  void initState() {
    super.initState();
    _giftsPageData = _firestore.collection('GiftsPageData').doc(_documentId);
    _fetchGiftOpenStatus();
  }

  Future<void> _fetchGiftOpenStatus() async {
    try {
      DocumentSnapshot<Map<String, dynamic>> doc = await _giftsPageData.get();
      if (doc.exists) {
        setState(() {
          _isOpened = {
            'c1': doc['C1Opened'] ?? false,
            'c2': doc['C2Opened'] ?? false,
            'c3': doc['C3Opened'] ?? false,
            'c4': doc['C4Opened'] ?? false,
            'c5': doc['C5Opened'] ?? false,
            'c6': doc['C6Opened'] ?? false,
          };
        });
      }
    } catch (e) {
      print('Error fetching opened states: $e');
    }
  }

  Future<void> _updateGiftsOpenStatus(String id, bool status) async {
    try {
      await _giftsPageData.set({
        '${id}Opened': status,
      }, SetOptions(merge: true));
      setState(() {
        _isOpened[id] = status;
      });
    } catch (e) {
      print('Error updating $id opened state: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: Padding(
          padding: const EdgeInsets.only(top: 120.0, left: 16, right: 16),
          child: GridView.count(
            crossAxisCount: 3,
            crossAxisSpacing: 16.0,
            mainAxisSpacing: 50.0,
            children: [
              _buildGiftItem(context, 'c1', 'letter 1', 'c1open'),
              _buildGiftItem(context, 'c2', 'letter 2', 'c2open'),
              _buildGiftItem(context, 'c3', 'memory ntreasure', 'c3open'),
              _buildGiftItem(context, 'c4', 'proposal', 'c4open'),
              _buildGiftItem(context, 'c5', 'voucher', 'v'),
              _buildGiftItem(context, 'c6', 'Cards', 'c6open'),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildGiftItem(
      BuildContext context, String id, String label, String openImagePath) {
    bool isOpened = _isOpened[id] ?? false; // Determine if the gift is opened

    return GestureDetector(
      onTap: () {
        if (!isOpened) {
          _updateGiftsOpenStatus(id, true);
        }

        if (id == 'c1') {
          showDialog(
            context: context,
            builder: (BuildContext context) {
              return const Letter1Dialogue();
            },
          );
        } else if (id == 'c2') {
          showDialog(
            context: context,
            builder: (BuildContext context) {
              return const Letter2Dialogue();
            },
          );
        } else if (id == 'c3') {
          showDialog(
            context: context,
            builder: (BuildContext context) {
              return LockerPasswordDialogue(
                onPasswordMatched: () {
                  _updateGiftsOpenStatus(id, true);
                  Navigator.of(context).pop();
                  showDialog(
                    context: context,
                    builder: (BuildContext context) {
                      return const LockerPicturesDialogue();
                    },
                  );
                },
              );
            },
          );
        } else if (id == 'c4') {
          showDialog(
            context: context,
            builder: (BuildContext context) {
              return const ProposalDialogue();
            },
          );
        } else if (id == 'c5') {
          showDialog(
            context: context,
            builder: (BuildContext context) {
              return const VoucherDialogue();
            },
          );
        } else if (id == 'c6') {
          showDialog(
            context: context,
            builder: (BuildContext context) {
              return const CardsDialogue();
            },
          );
        }
      },
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
            flex: 6,
            child: Image.asset(
              'assets/images/${isOpened && openImagePath != 'null' ? openImagePath : id}.png',
              height: 80,
            ),
          ),
          Expanded(
            flex: 5,
            child: Text(
              label,
              textAlign: TextAlign.center,
              style: TextStyle(
                fontFamily: GoogleFonts.dancingScript().fontFamily,
                fontWeight: FontWeight.bold,
                fontSize: 16,
                color: Colors.pink,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

I am trying to save the ids opened value to firebase and then fetch those values and use them to show the id’s opened or closed png

but everytime the page refreshes everything chanes to flase i.e. the closed images

Please tell me where have I done the Mistake. and will be very helpfull if you provide the detailed solution