import 'package:dotted_line/dotted_line.dart';
import 'package:flutter/material.dart';
import 'package:date_format/date_format.dart';
// import 'package:another_stepper/another_stepper.dart';
// import 'package:easy_stepper/easy_stepper.dart';
import 'package:timeline_tile/timeline_tile.dart';

var date = formatDate(DateTime.now(), [HH, ':', nn]);

class DetailPage extends StatelessWidget {
  final Map<String, dynamic> items;
  DetailPage({super.key, required this.items});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        automaticallyImplyLeading: false,
        elevation: 0,
        toolbarHeight: 44,
        title: Text(
          date,
          style: TextStyle(color: Color(0xff303336), fontSize: 15),
        ),
        actions: [
          Icon(
            Icons.signal_cellular_alt,
            color: Color(0xff303336),
          ),
          Icon(
            Icons.wifi,
            color: Color(0xff303336),
          ),
          RotatedBox(
            quarterTurns: -3,
            child: Icon(
              Icons.battery_std,
              color: Color(0xff303336),
            ),
          )
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Row(
              children: [
                BackButton(),
                Text(
                  'Detail',
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 17),
                ),
                Spacer(),
                ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                      backgroundColor: Color(0xff078C84).withOpacity(0.1),
                      side: BorderSide(color: Color(0xff078C84)),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(35))),
                  child: Row(
                    children: [
                      Text(
                        'Forum',
                        style:
                            TextStyle(color: Color(0xff078C84), fontSize: 15),
                      ),
                      SizedBox(
                        width: 5,
                      ),
                      Icon(
                        Icons.message_outlined,
                        color: Color(0xff078C84),
                      )
                    ],
                  ),
                )
              ],
            ),
            Divider(),
            Container(
              height: 44,
              alignment: Alignment.centerLeft,
              padding: EdgeInsets.symmetric(horizontal: 10),
              child: Text(
                items['type'],
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
              ),
            ),
            Row(
              children: [
                Container(
                  width: 400,
                  margin: EdgeInsets.symmetric(horizontal: 10),
                  decoration: BoxDecoration(
                      border: Border.all(color: Colors.black.withOpacity(0.1)),
                      shape: BoxShape.rectangle,
                      borderRadius: BorderRadius.circular(12)),
                  child: Row(
                    children: [
                      SizedBox(
                        width: 100,
                        height: 79.17,
                        child: gambar(items),
                      ),
                      Container(
                        width: 5,
                      ),
                      Column(
                        children: [
                          Container(
                            margin: EdgeInsets.all(5),
                            child: Text(
                              items['smallText'],
                              overflow: TextOverflow.clip,
                              style: TextStyle(
                                  fontWeight: FontWeight.w400,
                                  color: Color(0xff292D32),
                                  fontSize: 14),
                            ),
                          ),
                          DottedLine(
                            lineLength: 272,
                          ),
                          Container(
                            margin: EdgeInsets.all(5),
                            width: 272,
                            child: Text(
                              items['longText'],
                              overflow: TextOverflow.clip,
                              style: TextStyle(
                                  fontWeight: FontWeight.w300,
                                  color: Color(0xff292D32),
                                  fontSize: 13),
                            ),
                          )
                        ],
                      )
                    ],
                  ),
                ),
              ],
            ),
            Container(
              height: 10,
            ),
            Container(
              padding: EdgeInsets.symmetric(horizontal: 10),
              child: Row(
                children: [
                  Text(
                    'Ticket Number',
                    style: TextStyle(color: Color(0xff292D32), fontSize: 14),
                  ),
                  Spacer(),
                  Text(
                    '202209270254',
                    style: TextStyle(color: Color(0xff292D32), fontSize: 14),
                  )
                ],
              ),
            ),
            Container(
              height: 10,
            ),
            Container(
              padding: EdgeInsets.symmetric(horizontal: 10),
              child: Row(
                children: [
                  Text(
                    'Location',
                    style: TextStyle(color: Color(0xff292D32), fontSize: 14),
                  ),
                  Spacer(),
                  Text(
                    'Room 331',
                    style: TextStyle(color: Color(0xff292D32), fontSize: 14),
                  )
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.all(10),
              height: 1,
              color: Color(0xff292D32).withOpacity(0.5),
            ),
            Container(
              alignment: Alignment.centerLeft,
              padding: EdgeInsets.symmetric(horizontal: 10),
              child: Text(
                'Image',
                style: TextStyle(fontWeight: FontWeight.w400, fontSize: 14),
              ),
            ),
            Container(
              height: 5,
            ),
            Container(
              alignment: Alignment.centerLeft,
              padding: EdgeInsets.symmetric(horizontal: 10),
              child: Text(
                'No image attached.',
                style: TextStyle(
                    fontWeight: FontWeight.w400,
                    fontSize: 12,
                    color: Color(0xff292D32).withOpacity(0.85)),
              ),
            ),
            Container(
              height: 10,
            ),
            Container(
              alignment: Alignment.centerLeft,
              padding: EdgeInsets.symmetric(horizontal: 10),
              child: Text(
                'Note',
                style: TextStyle(fontWeight: FontWeight.w400, fontSize: 14),
              ),
            ),
            Container(
              height: 5,
            ),
            Container(
              alignment: Alignment.centerLeft,
              padding: EdgeInsets.symmetric(horizontal: 10),
              child: Text(
                '-',
                style: TextStyle(
                    fontWeight: FontWeight.w400,
                    fontSize: 12,
                    color: Color(0xff292D32).withOpacity(0.85)),
              ),
            ),
            Divider(
              thickness: 8,
            ),
            Container(
              height: 10,
            ),
            Container(
              alignment: Alignment.centerLeft,
              padding: EdgeInsets.symmetric(horizontal: 10),
              child: Text(
                'Activity',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
              ),
            ),
            Container(
              height: 10,
            ),
            Container(
              padding: EdgeInsets.symmetric(horizontal: 10),
              child: Row(
                children: [
                  Text(
                    'Servant',
                    style: TextStyle(color: Color(0xff292D32), fontSize: 14),
                  ),
                  Spacer(),
                  Text(
                    'Rendra WS',
                    style: TextStyle(color: Color(0xff292D32), fontSize: 14),
                  )
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.all(10),
              height: 1,
              color: Color(0xff292D32).withOpacity(0.5),
            ),
            Container(
              alignment: Alignment.centerLeft,
              padding: EdgeInsets.symmetric(horizontal: 10),
              child: Text(
                'Timeline',
                style: TextStyle(fontWeight: FontWeight.w400, fontSize: 14),
              ),
            ),
            //=======timelines=======
            TimelineTile(
              indicatorStyle: IndicatorStyle(
                width: 20,
                height: 5,
                indicatorXY: 0,
              ),
              endChild: Container(
                padding: EdgeInsets.symmetric(horizontal: 10),
                child: Row(
                  children: [
                    Text('Requested'),
                    Spacer(),
                    Text('31 Jan 12:43'),
                  ],
                ),
              ),
            ),
            //=======timelines=======
            //=======easy stepper=======
            // EasyStepper(
            //   activeStep: 1,
            //   direction: Axis.vertical,
            //   alignment: Alignment.centerLeft,
            //   steps: [
            //     EasyStep(icon: Icon(Icons.abc), lineText: 'def'),
            //     EasyStep(icon: Icon(Icons.ac_unit)),
            //     EasyStep(icon: Icon(Icons.access_alarm)),
            //   ],
            // ),
            //=======easy stepper=======
            //=======another stepper======
            // Padding(
            //   padding: const EdgeInsets.all(10),
            //   child: AnotherStepper(
            //     stepperDirection: Axis.vertical,
            //     verticalGap: 10,
            //     stepperList: [
            //       StepperData(
            //           subtitle: StepperText('Requested',
            //               textStyle: TextStyle(
            //                   color: Color(0xff292D32), fontSize: 14)),
            //           iconWidget: Container(
            //             decoration: BoxDecoration(
            //                 color: Color(0xffE8E8E8),
            //                 borderRadius: BorderRadius.circular(30)),
            //           )),
            //       StepperData(
            //           subtitle: StepperText('On Process',
            //               textStyle: TextStyle(
            //                   color: Color(0xff292D32), fontSize: 14)),
            //           iconWidget: Container(
            //             decoration: BoxDecoration(
            //                 color: Color(0xffE8E8E8),
            //                 borderRadius: BorderRadius.circular(30)),
            //           )),
            //       StepperData(
            //           subtitle: StepperText('Finish',
            //               textStyle: TextStyle(
            //                   color: Color(0xff292D32), fontSize: 14)),
            //           iconWidget: Container(
            //             decoration: BoxDecoration(
            //                 color: Color(0xff078C84),
            //                 borderRadius: BorderRadius.circular(30)),
            //           )),
            //     ],
            //   ),
            // ),
            //=======another stepper======
            //=======stepper=======
            // Stepper(
            //     controlsBuilder: (context, details) {
            //       return Container(height: 1,);
            //     },
            //     steps: [
            //       Step(
            //           content: Container(height: null,),
            //           title: Row(
            //             children: [
            //               Text('Requested'),
            //               Spacer(),
            //               Text('31 Jan 12:43')
            //             ],
            //           )),
            //       Step(content: Container(), title: Text('On Process')),
            //       Step(content: Container(), title: Text('Finish')),
            //     ]),
            //=======stepper=======
            //=======manual========
            // Container(
            //   height: 10,
            // ),
            // Container(
            //   padding: EdgeInsets.symmetric(horizontal: 10),
            //   child: Row(
            //     children: [
            //       Icon(
            //         Icons.circle,
            //         color: Color(0xffE8E8E8),
            //       ),
            //       Container(
            //         width: 10,
            //       ),
            //       Text(
            //         'Requested',
            //         style: TextStyle(color: Color(0xff292D32), fontSize: 14),
            //       ),
            //       Spacer(),
            //       Text(
            //         '31 Jan 12:43',
            //         style: TextStyle(color: Color(0xff292D32), fontSize: 14),
            //       )
            //     ],
            //   ),
            // ),
            // Container(
            //   height: 5,
            // ),
            // Container(
            //   padding: EdgeInsets.symmetric(horizontal: 10),
            //   child: Row(
            //     children: [
            //       Icon(
            //         Icons.circle,
            //         color: Color(0xffE8E8E8),
            //       ),
            //       Container(
            //         width: 10,
            //       ),
            //       Text(
            //         'On Process',
            //         style: TextStyle(color: Color(0xff292D32), fontSize: 14),
            //       ),
            //       Spacer(),
            //       Text(
            //         '31 Jan 14:43',
            //         style: TextStyle(color: Color(0xff292D32), fontSize: 14),
            //       )
            //     ],
            //   ),
            // ),
            // Container(
            //   height: 5,
            // ),
            // Container(
            //   padding: EdgeInsets.symmetric(horizontal: 10),
            //   child: Row(
            //     children: [
            //       Icon(
            //         Icons.circle,
            //         color: Color(0xff078C84),
            //       ),
            //       Container(
            //         width: 10,
            //       ),
            //       Text(
            //         'Finish',
            //         style: TextStyle(color: Color(0xff292D32), fontSize: 14),
            //       ),
            //       Spacer(),
            //       Text(
            //         '31 Jan 15:43',
            //         style: TextStyle(color: Color(0xff292D32), fontSize: 14),
            //       )
            //     ],
            //   ),
            // ),
            // Container(
            //   height: 5,
            // ),
            //=======manual========
            Container(
              alignment: Alignment.centerRight,
              padding: EdgeInsets.symmetric(horizontal: 10),
              child: Text(
                'tamu minta dibungkus untuk dibawa keluar',
                style: TextStyle(
                  fontWeight: FontWeight.w400,
                  fontSize: 12,
                  color: Color(0xff078C84),
                ),
              ),
            ),
            Container(
              height: 10,
            ),
            Container(
              margin: EdgeInsets.all(10),
              height: 1,
              color: Color(0xff292D32).withOpacity(0.5),
            ),
            Container(
              height: 10,
            ),
            Container(
              padding: EdgeInsets.symmetric(horizontal: 10),
              child: Row(
                children: [
                  Container(
                    width: 10,
                  ),
                  Text(
                    'Rate',
                    style: TextStyle(color: Color(0xff292D32), fontSize: 14),
                  ),
                  Spacer(),
                  Text(
                    'Really pleased',
                    style: TextStyle(color: Color(0xff292D32), fontSize: 14),
                  ),
                  Container(
                    width: 10,
                  ),
                  Icon(Icons.tag_faces)
                ],
              ),
            ),
            Divider(
              thickness: 8,
            ),
          ],
        ),
      ),
    );
  }

  Container gambar(items) {
    return Container(
      decoration: BoxDecoration(
          border: Border.all(color: items['color']),
          borderRadius: BorderRadius.all(Radius.circular(20)),
          color: items['color'].withOpacity(0.4)),
      padding: const EdgeInsets.all(5.0),
      child: Image.asset(
        items['image'],
        fit: BoxFit.cover,
      ),
    );
  }
}