import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:qyuota/config/colors.dart';
import 'package:qyuota/config/images.dart';
import 'package:qyuota/config/text_style.dart';

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

  @override
  State<NotificationScreen> createState() => _NotificationScreenState();
}

class _NotificationScreenState extends State<NotificationScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ConstColors.primaryColor,
      body: Stack(
        alignment: Alignment.bottomCenter,
        children: [
          Column(
            children: [
              SizedBox(height: MediaQuery.of(context).padding.top + 40),
              Padding(
                padding: const EdgeInsets.only(left: 20, right: 20),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    InkWell(
                      onTap: () {
                        Navigator.pop(context);
                      },
                      child: const Icon(
                        Icons.arrow_back,
                        color: ConstColors.whiteColor,
                      ),
                    ),
                    Text(
                      "Notifikasi",
                      style: pSemiBold18.copyWith(
                        fontSize: 20,
                        color: ConstColors.whiteColor,
                      ),
                    ),
                    const Icon(
                      Icons.arrow_back,
                      color: Colors.transparent,
                    ),
                  ],
                ),
              ),
            ],
          ),
          Container(
            height: Get.height - 120,
            width: Get.width,
            decoration: const BoxDecoration(
              color: ConstColors.whiteColor,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10),
                topRight: Radius.circular(10),
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.only(
                  left: 20, right: 20, top: 20, bottom: 20),
              child: Column(
                children: [
                  Row(
                    children: [
                      Container(
                        height: 31,
                        width: 50,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(6),
                          color: ConstColors.skyColor,
                        ),
                        child: Center(
                          child: Text(
                            "Semua",
                            style: pRegular14.copyWith(
                              fontSize: 12,
                              color: ConstColors.whiteColor,
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(width: 10),
                      Container(
                        height: 31,
                        width: 120,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(6),
                          border: Border.all(
                            color: ConstColors.lightColor.withOpacity(0.2),
                          ),
                        ),
                        child: Center(
                          child: Text(
                            "Transaksi",
                            style: pRegular14.copyWith(
                              fontSize: 12,
                              color: ConstColors.lightColor,
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(width: 10),
                      Container(
                        height: 31,
                        width: 81,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(6),
                          border: Border.all(
                            color: ConstColors.lightColor.withOpacity(0.2),
                          ),
                        ),
                        child: Center(
                          child: Text(
                            "Promo",
                            style: pRegular14.copyWith(
                              fontSize: 12,
                              color: ConstColors.lightColor,
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                  const SizedBox(height: 30),
                  Expanded(
                    child: ListView.builder(
                      itemCount: 5,
                      physics: const ClampingScrollPhysics(),
                      padding: EdgeInsets.zero,
                      itemBuilder: (BuildContext context, int index) {
                        return Column(
                          children: [
                            Row(
                              children: [
                                Container(
                                  height: 32,
                                  width: 32,
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(6),
                                    color: index == 2
                                        ? const Color(0xff00D455)
                                            .withOpacity(0.2)
                                        : index == 3
                                            ? const Color(0xffB066FF)
                                                .withOpacity(0.2)
                                            : index == 4
                                                ? const Color(0xffFF4747)
                                                    .withOpacity(0.2)
                                                : ConstColors.skyColor
                                                    .withOpacity(0.2),
                                  ),
                                  child: Padding(
                                    padding:
                                        EdgeInsets.all(index == 2 ? 7 : 4.0),
                                    child: SvgPicture.asset(
                                      index == 2
                                          ? DefaultImages.n4
                                          : index == 3
                                              ? DefaultImages.n3
                                              : index == 4
                                                  ? DefaultImages.n1
                                                  : DefaultImages.n2,
                                    ),
                                  ),
                                ),
                                const SizedBox(width: 14),
                                Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                      index == 0
                                          ? "Top Up Saldo"
                                          : index == 1
                                              ? "Power Net. 10 GB"
                                              : index == 2
                                                  ? "Panggilan Unlimited"
                                                  : index == 3
                                                      ? "Kamu punya voucher paket data baru!"
                                                      : "paket datamu sudah habis",
                                      style: pSemiBold20.copyWith(
                                        fontSize: 14,
                                      ),
                                    ),
                                    const SizedBox(height: 3),
                                    Text(
                                      index == 0
                                          ? index == 1
                                              ? "Jul 25, 2020 . 11.21"
                                              : index == 2
                                                  ? "Jul 1, 2020 . 03.21"
                                                  : index == 3
                                                      ? "Jul 1, 2020 . 03.21"
                                                      : "Kemarin . 03.21"
                                          : "Kemarin . 03.21",
                                      style: pRegular14.copyWith(
                                        fontSize: 12,
                                        color: ConstColors.lightColor,
                                      ),
                                    ),
                                  ],
                                ),
                              ],
                            ),
                            const SizedBox(height: 10),
                            const Divider(color: Color(0xffE8E9F1)),
                            const SizedBox(height: 10),
                          ],
                        );
                      },
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}