import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:hris_selfservice_mobile/Screens/Menu/SlipGaji/background.dart';

class SlipGajiScreen extends StatefulWidget {
  const SlipGajiScreen({Key? key}) : super(key: key);

  @override
  State<SlipGajiScreen> createState() => _SlipGajiScreenState();
}

class _SlipGajiScreenState extends State<SlipGajiScreen> {
  var selectedDate;
  bool visible = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
          child: Column(
        children: <Widget>[
          Stack(
            children: [
              WavyHeader(),
              Container(
                margin: EdgeInsets.only(top: 90),
                padding: EdgeInsets.fromLTRB(20, 5, 25, 5),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Text(
                      'Slip Gaji\t\t',
                      maxLines: 1,
                      style: GoogleFonts.luckiestGuy(
                        fontSize: 28,
                        color: Colors.red,
                        fontStyle: FontStyle.italic,
                      ),
                    ),
                    Image.asset('assets/icons/ic_salary.png', width: 40, height: 40,),
                  ],
                )
              ),
              SafeArea(
                  child: Container(
                width: MediaQuery.of(context).size.width,
                margin: EdgeInsets.only(
                  top: MediaQuery.of(context).size.height / 5,
                  left: 15,
                  right: 15,
                ),
                child: Column(
                  children: [
                    Container(
                      margin: EdgeInsets.only(bottom: 20),
                      child: Row(
                        children: [
                          Expanded(
                              flex: 2,
                              child: Text(
                                'Date\t:\t',
                                style: GoogleFonts.inconsolata(fontSize: 20),
                              )),
                          Expanded(
                              flex: 8,
                              child: Container(
                                decoration: BoxDecoration(
                                    color: CupertinoColors.systemGrey2,
                                    borderRadius: BorderRadius.circular(5)),
                                child: DropdownButton(
                                  value: this.selectedDate,
                                  isExpanded: true,
                                  underline: SizedBox(),
                                  hint: Text(
                                    '\t\t\tChoose Date',
                                    style: TextStyle(color: Colors.black54),
                                  ),
                                  onChanged: (value) {
                                    print(value);
                                    setState(() {
                                      selectedDate = value!;
                                      if (selectedDate == value){
                                        visible = true;
                                      } else {
                                        visible = false;
                                      }
                                    });
                                  },
                                  items: dateList
                                      .map(
                                        (e) => DropdownMenuItem(
                                            value: e,
                                            child: Text("\t\t\t" + e)),
                                      )
                                      .toList(),
                                ),
                              )),
                        ],
                      ),
                    ),
                    Visibility(
                      visible: visible,
                      child: Text(
                        'Detail Slip Gaji Bulan ' + selectedDate.toString(),
                        style: GoogleFonts.viga(
                          fontSize: 15,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                    Visibility(
                        visible: visible,
                        child: Container(
                          height: 200,
                          child: Card(
                            elevation: 7,
                            child: Container(
                                decoration: BoxDecoration(
                                    color: Color(0XFFFFFEFC),
                                    borderRadius: BorderRadius.circular(10))),
                          ),
                        )),
                    Visibility(
                      visible: visible,
                      child: Container(
                        alignment: Alignment.centerRight,
                        child: ElevatedButton(
                          onPressed: () {},
                          style: ElevatedButton.styleFrom(),
                          child: Text('Download Slip Gaji'),
                        ),
                      ),
                    ),
                  ],
                ),
              )),
            ],
          ),
        ],
      )),
    );
  }
}

List<String> dateList = [
  "September 2022",
  "Oktober 2022",
  "November 2022",
  "Desember 2022"
];

const List<Color> Gradients1 = [
  Color(0xFF0EDED2),
  Color(0xFF03A0FE),
];