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

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

class SearchPage extends StatelessWidget {
  final Map<String, dynamic> items;
  SearchPage({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(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                BackButton(),
                Container(
                  height: 44,
                  alignment: Alignment.centerLeft,
                  padding: EdgeInsets.symmetric(horizontal: 10),
                  child: Text(
                    items['type'],
                    style: TextStyle(fontWeight: FontWeight.w500, fontSize: 17),
                  ),
                ),
              ],
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 10),
              child: SizedBox(
                width: 396,
                height: 267.72,
                child: gambar(items),
              ),
            ),
            Container(
              width: 396,
              margin: EdgeInsets.all(5),
              decoration: BoxDecoration(
                  border: Border.all(color: Colors.black.withOpacity(0.1)),
                  shape: BoxShape.rectangle,
                  borderRadius: BorderRadius.circular(12)),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    margin: EdgeInsets.all(5),
                    child: Text(
                      items['type'],
                      overflow: TextOverflow.clip,
                      style: TextStyle(
                          fontWeight: FontWeight.w400,
                          color: Color(0xff292D32),
                          fontSize: 14),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 5),
                    child: DottedLine(),
                  ),
                  Container(
                    margin: EdgeInsets.all(5),
                    child: Text(
                      items['longText'],
                      overflow: TextOverflow.clip,
                      style: TextStyle(
                          fontWeight: FontWeight.w300,
                          color: Color(0xff292D32),
                          fontSize: 13),
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.all(10),
              child: Text(
                'Your Location',
                style: TextStyle(fontWeight: FontWeight.w500, fontSize: 14),
              ),
            ),
            Container(
                width: 396,
                margin: EdgeInsets.symmetric(horizontal: 10),
                decoration: BoxDecoration(
                    color: Color(0xff078C84).withOpacity(0.85),
                    border: Border.all(color: Color(0xff078C84)),
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(12),
                        topRight: Radius.circular(12))),
                child: Padding(
                    padding: const EdgeInsets.all(5),
                    child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: [
                              Icon(Icons.remove),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text('Default Location'),
                                  Container(
                                    height: 5,
                                  ),
                                  Text('Room 331')
                                ],
                              )
                            ],
                          ),
                        ]))),
            Container(
                width: 396,
                margin: EdgeInsets.symmetric(
                  horizontal: 10,
                ),
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.black.withOpacity(0.1)),
                    shape: BoxShape.rectangle,
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(12),
                        bottomRight: Radius.circular(12))),
                child: Padding(
                    padding: const EdgeInsets.all(5),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Icon(Icons.add),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text('I moved to other location'),
                                Container(
                                  width: 350,
                                  margin: EdgeInsets.symmetric(vertical: 5),
                                  decoration: BoxDecoration(
                                      border: Border.all(
                                          color: Colors.black.withOpacity(0.1)),
                                      shape: BoxShape.rectangle,
                                      borderRadius: BorderRadius.circular(12)),
                                  child: Row(
                                    children: [
                                      Padding(
                                        padding: const EdgeInsets.symmetric(
                                            horizontal: 5),
                                        child: Icon(
                                          Icons.location_on_outlined,
                                          color: Color(0xffD91B1B),
                                        ),
                                      ),
                                      Text(
                                        'Where are you?',
                                        style: TextStyle(
                                            fontWeight: FontWeight.w300,
                                            fontSize: 13,
                                            color: Color(0xff292D32)
                                                .withOpacity(0.5)),
                                      )
                                    ],
                                  ),
                                )
                              ],
                            )
                          ],
                        ),
                      ],
                    ))),
            Container(
              margin: EdgeInsets.all(10),
              child: Text(
                'Add Image',
                style: TextStyle(fontWeight: FontWeight.w500, fontSize: 14),
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 10),
              child: Row(
                children: [
                  Text(
                    'You can send us a picture as a clue or something..',
                    style: TextStyle(
                        fontWeight: FontWeight.w300,
                        fontSize: 12,
                        color: Color(0xff292D32).withOpacity(0.85)),
                  ),
                  Spacer(),
                  Icon(
                    Icons.photo_camera,
                    color: Color(0xff078C84),
                  )
                ],
              ),
            ),
            Divider(),
            Container(
              width: 394,
              margin: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
              decoration: BoxDecoration(
                  border: Border.all(color: Colors.black.withOpacity(0.1)),
                  shape: BoxShape.rectangle,
                  borderRadius: BorderRadius.circular(12)),
              child: Padding(
                padding: const EdgeInsets.all(5),
                child: Row(
                  children: [
                    Icon(Icons.edit),
                    Container(
                      width: 5,
                    ),
                    Text('Add note..',
                        style: TextStyle(
                            fontWeight: FontWeight.w300,
                            fontSize: 13,
                            color: Color(0xff292D32).withOpacity(0.5))),
                  ],
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
              width: 396,
              height: 51,
              child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Color(0xff078C84),
                  ),
                  onPressed: () {},
                  child: Text(
                    'Send Request',
                    style: TextStyle(
                        fontWeight: FontWeight.w600,
                        fontSize: 16,
                        color: Colors.white),
                  )),
            )
          ],
        ),
      ),
    );
  }

  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,
      ),
    );
  }
}