import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:lba/extension/screenSize.dart';
import 'package:lba/gen/assets.gen.dart';
import 'package:lba/widgets/orderType.dart';
import 'package:lba/widgets/remainingTime.dart';

class ListScreen extends StatefulWidget {
  final bool delivery;
  final bool pickup;
  int initialTimerStatus; 
  final String expiryTimeString;

  ListScreen({
    super.key,
    required this.delivery,
    required this.pickup,
    this.initialTimerStatus=3,
    required this.expiryTimeString,
  });

  @override
  State<ListScreen> createState() => _ListScreenState();
}

class _ListScreenState extends State<ListScreen> {
  late RemainingTime _timer;
  late ValueNotifier<int> _timerStatus;

  @override
  void initState() {
    super.initState();
    _timer = RemainingTime();
    _timerStatus = ValueNotifier<int>(widget.initialTimerStatus);
    _timer.initializeFromExpiry(expiryTimeString: widget.expiryTimeString);

    _timer.remainingSeconds.addListener(() {
      if (_timer.remainingSeconds.value <= 0) {
        _timerStatus.value = 3; 
      } else if (_timer.remainingSeconds.value < 18000) {
        _timerStatus.value = 1; 
      } else if (_timer.remainingSeconds.value > 18000) {
        _timerStatus.value = 2; 
      }
    });
  }

  @override
  void dispose() {
    _timer.dispose();
    _timerStatus.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final width = context.screenWidth;
    final height = context.screenHeight;
    return 
      Padding(
        padding: const EdgeInsets.only(bottom: 16),
        child: Stack(
          children: [
            Container(
              margin: const EdgeInsets.only(top: 60),
              padding: const EdgeInsets.only(top: 80),
              decoration: BoxDecoration(
                color: const Color.fromARGB(255, 242, 242, 241),
                borderRadius: BorderRadius.circular(10),
              ),
              child: Padding(
                padding: EdgeInsets.fromLTRB(12, 0, width/50, 15),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          Row(
                            children: [
                              SvgPicture.asset(Assets.icons.phCheese.path),
                              const SizedBox(width: 5),
                              const Text(
                                "Amul Cheese Slices",
                                style: TextStyle(fontWeight: FontWeight.bold),
                              ),
                            ],
                          ),
                          const SizedBox(height: 10),
                          Row(
                            children: [
                              SvgPicture.asset(
                                Assets.icons.location.path,
                                color: const Color.fromARGB(255, 157, 157, 155),
                                width: 14,
                              ),
                              const SizedBox(width: 5),
                              const Text("Sharjah (750m away)",style: TextStyle(
                                fontSize: 12,
                                fontWeight: FontWeight.w500
                              ),),
                            ],
                          ),
                          const SizedBox(height: 10),
                          Row(
                            children: [
                              SvgPicture.asset(
                                Assets.icons.coin.path,
                                width: 14,
                              ),
                              const SizedBox(width: 5),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: const [
                                  Text(
                                    "18.15 AED",
                                    style: TextStyle(
                                      color: Color.fromARGB(255, 157, 157, 155),
                                      fontSize: 10,
                                      decoration: TextDecoration.lineThrough,
                                    ),
                                  ),
                                  SizedBox(height: 0),
                                  Row(
                                    children: [
                                      Text("15.84 AED",style: TextStyle(
                                        fontSize: 12,
                                        fontWeight: FontWeight.w500
                                      ),),
                                      SizedBox(width: 4),
                                      Text(
                                        "(13% off)",
                                        style: TextStyle(
                                          color: Color.fromARGB(255, 76, 175, 80),
                                          fontSize: 10,
                                          fontWeight: FontWeight.w500
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.fromLTRB(0, 35, widget.delivery == false || widget.pickup == false ? width/5 : width/60, 0),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              SvgPicture.asset(
                                Assets.icons.star.path,
                                width: 14,
                              ),
                              const SizedBox(width: 2),
                              const Text(
                                "4.8",
                                style: TextStyle(
                                  color: Color.fromARGB(255, 112, 112, 110),
                                ),
                              ),
                            ],
                          ),
                          const SizedBox(height: 10),
                          Row(
                            children: [
                              if (widget.delivery)
                                OrderType(
                                  icon: Assets.icons.cardPos.path,
                                  typename: "Delivery",
                                ),
                              if (widget.delivery) const SizedBox(width: 5),
                              if (widget.pickup)
                                OrderType(
                                  icon: Assets.icons.shoppingCart.path,
                                  typename: "Pickup",
                                ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            ClipRRect(
              borderRadius: const BorderRadius.only(
                topRight: Radius.circular(10),
                topLeft: Radius.circular(10),
              ),
              child: Image.asset(
                Assets.images.media.path,
                width: double.infinity,
                height: 130,
                fit: BoxFit.cover,
              ),
            ),
            Positioned(
              top: 10,
              left: 10,
              child: ValueListenableBuilder<int>(
                valueListenable: _timerStatus,
                builder: (context, timerStatus, child) {
                  return Container(
                    padding: const EdgeInsets.symmetric(horizontal: 6),
                    height: 20,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(6),
                      color: timerStatus == 1
                          ? const Color.fromARGB(255, 255, 193, 7)
                          : timerStatus == 2
                              ? const Color.fromARGB(255, 76, 175, 80)
                              : timerStatus == 3
                                  ? const Color.fromARGB(255, 244, 67, 54)
                                  : const Color.fromARGB(255, 244, 67, 54),
                    ),
                    child: Row(
                      children: [
                        SvgPicture.asset(
                          timerStatus == 1
                              ? Assets.icons.timer.path
                              : timerStatus == 2
                                  ? Assets.icons.timerStart.path
                                  : Assets.icons.timerPause.path,
                          width: 12,
                          height: 12,
                        ),
                        const SizedBox(width: 5),
                        ValueListenableBuilder<int>(
                          valueListenable: _timer.remainingSeconds,
                          builder: (context, seconds, child) {
                            return Text(
                              timerStatus==3? "Unavailable":"${_timer.formatTime()} left",
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 12,
                                fontWeight: FontWeight.w400,
                              ),
                            );
                          },
                        ),
                      ],
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      );
  }
}