import 'package:dotted_line/dotted_line.dart';
import 'package:flutter/material.dart';
import 'package:date_format/date_format.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),
              ),
            ),
            Container(
              margin: EdgeInsets.all(10),
              child: Column(
                children: [
                  SizedBox(
                      child: TimelineTile(
                          isFirst: true,
                          endChild: Container(
                            margin:
                                EdgeInsets.only(bottom: 10, top: 10, left: 10),
                            child: Row(
                              children: [
                                Text('Requested'),
                                Spacer(),
                                Text('31 Jan 12:43')
                              ],
                            ),
                          ))),
                  SizedBox(
                      child: TimelineTile(
                          endChild: Container(
                    margin: EdgeInsets.only(bottom: 10, top: 10, left: 10),
                    child: Row(
                      children: [
                        Text('On Process'),
                        Spacer(),
                        Text('31 Jan 14:43')
                      ],
                    ),
                  ))),
                  SizedBox(
                      child: TimelineTile(
                    indicatorStyle:
                        IndicatorStyle(color: Color(0xff078C84), width: 25),
                    isLast: true,
                    endChild: Container(
                      margin: EdgeInsets.only(bottom: 10, top: 10, left: 10),
                      child: Row(
                        children: [
                          Text('Finish'),
                          Spacer(),
                          Text('31 Jan 15:43')
                        ],
                      ),
                    ),
                  )),
                ],
              ),
            ),
            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,
      ),
    );
  }
}