import 'package:absensi_sas_flutter/app/constant.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

import '../../widget/real_date.dart';
import '../../widget/real_time.dart';

class HomeScreen extends HookConsumerWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    

    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: Container(
        width: Constant.getActualXPhone(context: context, x: 100),
        height: Constant.getActualYPhone(context: context, y: 100),
        child: FittedBox(
          child: FloatingActionButton(
            onPressed: () {},
            backgroundColor: Color(0xFFFFFFFF),
            shape: CircleBorder(),
            child: Container(
              width: Constant.getActualXPhone(context: context, x: 50),
              height: Constant.getActualYPhone(context: context, y: 50),
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage(
                      'images/finger_tap_orange_botnav.png'), // Ganti dengan path gambar Anda
                ),
              ),
            ),
          ),
        ),
      ),
      bottomNavigationBar: Container(
        width: Constant.getActualXPhone(context: context, x: 390),
        height: Constant.getActualYPhone(context: context, y: 84),
        decoration: BoxDecoration(
          color: Color(0xFFFFFFFF),
          boxShadow: [
            BoxShadow(
              offset: Offset(0, -1),
              blurRadius: 8,
              spreadRadius: -8,
              color: Color.fromRGBO(0, 0, 0, 0.10),
            ),
          ],
        ),
        child: Row(
          children: <Widget>[
            Expanded(
                child: Container(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Image(
                    image: AssetImage('images/home_orange.png'),
                  ),
                  Text(
                    'Beranda',
                    style: Constant.subtitle_500_12(context: context).copyWith(
                      color: Constant.textOrange,
                    ),
                  )
                ],
              ),
            )),
            Expanded(
                child: Container(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Image(
                    image: AssetImage('images/person_grey.png'),
                  ),
                  Text(
                    'Profile',
                    style: Constant.subtitle_500_12(context: context).copyWith(
                      color: Constant.textLightGrey,
                    ),
                  )
                ],
              ),
            )),
          ],
        ),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Container(
            width: Constant.getActualXPhone(context: context, x: 390),
            // height: Constant.getActualYPhone(context: context, y: 844),
            child: Column(
              children: [
                Padding(
                  padding: EdgeInsets.only(
                    top: Constant.getActualYPhone(context: context, y: 58),
                    left: Constant.getActualXPhone(context: context, x: 33),
                    right: Constant.getActualXPhone(context: context, x: 27),
                  ),
                  child: Container(
                    child: ListTile(
                      leading: Container(
                          width:
                              Constant.getActualXPhone(context: context, x: 36),
                          height:
                              Constant.getActualYPhone(context: context, y: 36),
                          child: Image(
                            image: AssetImage('images/avatar_c.png'),
                          )),
                      title: Text(
                        "Stephen Kusumo",
                        overflow: TextOverflow.ellipsis,
                        style: Constant.titleH1_700(context: context)
                          ..copyWith(
                            color: Constant.textBlack,
                          ),
                      ),
                      subtitle: Text(
                        "Step@example.com",
                        style:
                            Constant.subtitle_500_12(context: context).copyWith(
                          color: Constant.textLightGrey,
                        ),
                      ),
                      trailing: Container(
                        width:
                            Constant.getActualXPhone(context: context, x: 36),
                        height:
                            Constant.getActualYPhone(context: context, y: 36),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(12.0),
                          color: Colors.white,
                          shape: BoxShape.rectangle,
                          boxShadow: [
                            BoxShadow(
                              offset: Offset(0, 12),
                              blurRadius: 24,
                              color: Color.fromRGBO(145, 158, 171, 0.12),
                            ),
                          ],
                        ),
                        child: IconButton(
                          onPressed: () {},
                          icon: Container(
                            width: Constant.getActualXPhone(
                                context: context, x: 20),
                            height: Constant.getActualYPhone(
                                context: context, y: 20),
                            child: Image(
                              image: AssetImage('images/alert_badge.png'),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),

                SizedBox(
                  height: Constant.getActualYPhone(context: context, y: 44),
                ),

                //Card Time
                Padding(
                  padding: EdgeInsets.only(
                    left: Constant.getActualXPhone(context: context, x: 33),
                    right: Constant.getActualXPhone(context: context, x: 27),
                  ),
                  child: Container(
                    width: Constant.getActualXPhone(context: context, x: 330),
                    height: Constant.getActualYPhone(context: context, y: 200),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(40),
                      image: DecorationImage(
                        image: AssetImage(
                            'images/card_bg_1.png'), // Ganti dengan path gambar Anda
                        fit: BoxFit.fill, // Sesuaikan cara gambar ditampilkan
                      ),
                    ),
                    child: Padding(
                      padding: EdgeInsets.only(
                        top: Constant.getActualYPhone(context: context, y: 16),
                        left: Constant.getActualXPhone(context: context, x: 25),
                        right:
                            Constant.getActualXPhone(context: context, x: 25),
                      ),
                      child: Container(
                        width:
                            Constant.getActualXPhone(context: context, x: 280),
                        height:
                            Constant.getActualYPhone(context: context, y: 150),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            // Date
                            RealTimeFormattedDate(),
                            SizedBox(
                              height: Constant.getActualYPhone(
                                  context: context, y: 8),
                            ),

                            //Time
                            RealTimeClock(), // Menampilkan waktu real-time menggunakan RealTimeClock
                            SizedBox(
                              height: Constant.getActualYPhone(
                                  context: context, y: 20),
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment
                                  .center, // Menengahkan secara horizontal
                              children: [
                                Spacer(), // Spasi di sebelah kiri "Check In"
                                Column(
                                  children: [
                                    Image.asset(
                                      'images/finger_tap.png', // Path gambar untuk "Check In"
                                      width: Constant.getActualXPhone(
                                          context: context, x: 22),
                                      height: Constant.getActualYPhone(
                                          context: context, y: 22),
                                    ),
                                    SizedBox(
                                      height: Constant.getActualYPhone(
                                          context: context, y: 8),
                                    ),
                                    Text(
                                      '--:--',
                                      style: TextStyle(
                                          // Atur gaya teks '--:--' sesuai kebutuhan
                                          ),
                                    ),
                                    Text(
                                      'Clock In',
                                      style:
                                          Constant.titleH2_700(context: context)
                                              .copyWith(
                                        color: Constant.textLightGrey,
                                      ),
                                    ),
                                  ],
                                ),

                                SizedBox(
                                  width: Constant.getActualXPhone(
                                      context: context, x: 96),
                                ), // Jarak antara "Check In" dan "Check Out"
                                Column(
                                  children: [
                                    Image.asset(
                                      'images/finger_tap.png', // Path gambar untuk "Check Out"
                                      width: Constant.getActualXPhone(
                                          context: context, x: 22),
                                      height: Constant.getActualYPhone(
                                          context: context, y: 22),
                                    ),
                                    SizedBox(
                                      height: Constant.getActualYPhone(
                                          context: context, y: 8),
                                    ),
                                    Text(
                                      '--:--',
                                      style: TextStyle(
                                          // Atur gaya teks '--:--' sesuai kebutuhan
                                          ),
                                    ),
                                    Text(
                                      'Clock Out',
                                      style:
                                          Constant.titleH2_700(context: context)
                                              .copyWith(
                                        color: Constant.textLightGrey,
                                      ),
                                    ),
                                  ],
                                ),
                                Spacer(), // Spasi di sebelah kanan "Check Out"
                              ],
                            ),

                            SizedBox(
                              height: Constant.getActualYPhone(
                                  context: context, y: 16),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),

                SizedBox(
                  height: Constant.getActualYPhone(context: context, y: 56),
                ),

                //Menu Cuti Lembur
                Padding(
                  padding: EdgeInsets.only(
                    left: Constant.getActualXPhone(context: context, x: 33),
                    right: Constant.getActualXPhone(context: context, x: 27),
                  ),
                  child: Container(
                    width: Constant.getActualXPhone(context: context, x: 330),
                    child: Row(
                      children: [
                        //Menu Cuti
                        Container(
                          width:
                              Constant.getActualXPhone(context: context, x: 98),
                          // color: Colors.amber,
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(16),
                            boxShadow: [
                              BoxShadow(
                                color: Color.fromRGBO(145, 158, 171, 0.20),
                              ),
                            ],
                          ),
                          child: Padding(
                            padding: EdgeInsets.only(
                              left: Constant.getActualXPhone(
                                  context: context, x: 12),
                              right: Constant.getActualXPhone(
                                  context: context, x: 12),
                              top: Constant.getActualYPhone(
                                  context: context, y: 8),
                              bottom: Constant.getActualYPhone(
                                  context: context, y: 8),
                            ),
                            child: InkWell(
                              onTap: () {},
                              child: Column(
                                children: [
                                  Container(
                                    child: Image(
                                      width: Constant.getActualXPhone(
                                          context: context, x: 50),
                                      height: Constant.getActualYPhone(
                                          context: context, y: 50),
                                      image: AssetImage('images/person.png'),
                                    ),
                                  ),
                                  SizedBox(
                                    height: Constant.getActualYPhone(
                                        context: context, y: 8),
                                  ),
                                  Text(
                                    'Cuti',
                                    style: Constant.titleH2_600_14(
                                            context: context)
                                        .copyWith(
                                      color: Constant.textDarkGrey,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),

                        SizedBox(
                          width:
                              Constant.getActualXPhone(context: context, x: 18),
                        ),

                        //Menu Lembur
                        Container(
                          width:
                              Constant.getActualXPhone(context: context, x: 98),
                          // color: Colors.amber,
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(16),
                            boxShadow: [
                              BoxShadow(
                                color: Color.fromRGBO(145, 158, 171, 0.20),
                              ),
                            ],
                          ),
                          child: Padding(
                            padding: EdgeInsets.only(
                              left: Constant.getActualXPhone(
                                  context: context, x: 12),
                              right: Constant.getActualXPhone(
                                  context: context, x: 12),
                              top: Constant.getActualYPhone(
                                  context: context, y: 8),
                              bottom: Constant.getActualYPhone(
                                  context: context, y: 8),
                            ),
                            child: InkWell(
                              onTap: () {},
                              child: Column(
                                children: [
                                  Container(
                                    child: Image(
                                      width: Constant.getActualXPhone(
                                          context: context, x: 50),
                                      height: Constant.getActualYPhone(
                                          context: context, y: 50),
                                      image: AssetImage('images/task.png'),
                                    ),
                                  ),
                                  SizedBox(
                                    height: Constant.getActualYPhone(
                                        context: context, y: 8),
                                  ),
                                  Text(
                                    'Lembur',
                                    style: Constant.titleH2_600_14(
                                            context: context)
                                        .copyWith(
                                      color: Constant.textDarkGrey,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),

                SizedBox(
                  height: Constant.getActualYPhone(context: context, y: 56),
                ),

                //Menu Rekap Presensi
                Padding(
                  padding: EdgeInsets.only(
                      right: Constant.getActualXPhone(context: context, x: 27),
                      left: Constant.getActualXPhone(context: context, x: 33),
                      bottom:
                          Constant.getActualYPhone(context: context, y: 40)),
                  child: Container(
                    width: Constant.getActualXPhone(context: context, x: 330),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Rekap Presensi Bulan Ini',
                          style: Constant.titleH1_500_18(context: context)
                              .copyWith(
                            color: Constant.textTrueBlack,
                          ),
                        ),
                        SizedBox(
                          height:
                              Constant.getActualYPhone(context: context, y: 20),
                        ),
                        Container(
                          decoration: BoxDecoration(
                            shape: BoxShape.rectangle,
                            borderRadius: BorderRadius.circular(16),
                            color: Colors.white, // Set background color to #FFF
                            boxShadow: [
                              BoxShadow(
                                color: Color.fromRGBO(145, 158, 171, 0.20),
                                blurRadius: 2,
                              ),
                            ],
                          ),
                          child: Padding(
                            padding: EdgeInsets.only(
                              top: Constant.getActualYPhone(
                                  context: context, y: 12),
                              bottom: Constant.getActualYPhone(
                                  context: context, y: 12),
                              left: Constant.getActualXPhone(
                                  context: context, x: 24),
                              right: Constant.getActualXPhone(
                                  context: context, x: 24),
                            ),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Container(
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Text(
                                        '24 hari',
                                        style: Constant.subtitle_600_14(
                                                context: context)
                                            .copyWith(
                                          color: Constant.textOrange,
                                        ),
                                      ),
                                      SizedBox(
                                        height: Constant.getActualYPhone(
                                            context: context, y: 4),
                                      ),
                                      SizedBox(
                                        child: Row(
                                          children: [
                                            Image(
                                              image: AssetImage(
                                                  'images/person_available_grey.png'),
                                            ),
                                            SizedBox(
                                              width: Constant.getActualXPhone(
                                                  context: context, x: 4),
                                            ),
                                            Text(
                                              'Kehadiran',
                                              style: Constant.subtitle_500_12(
                                                      context: context)
                                                  .copyWith(
                                                color: Constant.textDarkGrey,
                                              ),
                                            ),
                                          ],
                                        ),
                                      )
                                    ],
                                  ),
                                ),

                                Image(
                                  image: AssetImage('images/divider.png'),
                                ),

                                //Tidak Hadir
                                Container(
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Text(
                                        '2 hari',
                                        style: Constant.subtitle_600_14(
                                                context: context)
                                            .copyWith(
                                          color: Constant.textOrange,
                                        ),
                                      ),
                                      SizedBox(
                                        height: Constant.getActualYPhone(
                                            context: context, y: 4),
                                      ),
                                      SizedBox(
                                        child: Row(
                                          children: [
                                            Image(
                                              image: AssetImage(
                                                  'images/person_delete_grey.png'),
                                            ),
                                            SizedBox(
                                              width: Constant.getActualXPhone(
                                                  context: context, x: 4),
                                            ),
                                            Text(
                                              'Tidak Hadir',
                                              style: Constant.subtitle_500_12(
                                                      context: context)
                                                  .copyWith(
                                                color: Constant.textDarkGrey,
                                              ),
                                            ),
                                          ],
                                        ),
                                      )
                                    ],
                                  ),
                                ),

                                Image(
                                  image: AssetImage('images/divider.png'),
                                ),

                                //Tidak Hadir
                                Container(
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Text(
                                        '5 hari',
                                        style: Constant.subtitle_600_14(
                                                context: context)
                                            .copyWith(
                                          color: Constant.textOrange,
                                        ),
                                      ),
                                      SizedBox(
                                        height: Constant.getActualYPhone(
                                            context: context, y: 4),
                                      ),
                                      SizedBox(
                                        child: Row(
                                          children: [
                                            Image(
                                              image: AssetImage(
                                                  'images/task_pending_grey.png'),
                                            ),
                                            SizedBox(
                                              width: Constant.getActualXPhone(
                                                  context: context, x: 4),
                                            ),
                                            Text(
                                              'Lembur',
                                              style: Constant.subtitle_500_12(
                                                      context: context)
                                                  .copyWith(
                                                color: Constant.textDarkGrey,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}