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(
              margin: EdgeInsets.all(10),
              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(
                      lineLength: 396,
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.all(5),
                    width: 396,
                    child: Text(
                      items['longText'],
                      overflow: TextOverflow.clip,
                      style: TextStyle(
                          fontWeight: FontWeight.w300,
                          color: Color(0xff292D32),
                          fontSize: 13),
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 10),
              child: Text(
                'Your Location',
                style: TextStyle(fontWeight: FontWeight.w500, fontSize: 14),
              ),
            ),
            Container(
              margin: EdgeInsets.all(10),
              decoration: BoxDecoration(
                  border: Border.all(color: Colors.black.withOpacity(0.1)),
                  shape: BoxShape.rectangle,
                  borderRadius: BorderRadius.circular(12)),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    children: [
                      Icon(Icons.remove),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [Text('Default Location'), Text('Room 331')],
                      )
                    ],
                  ),
                  Divider(),
                  Row(
                    children: [
                      Icon(Icons.add),
                      Column(
                        children: [
                          Text('I moved to other location'),
                          Container(
                            decoration: BoxDecoration(
                                border: Border.all(
                                    color: Colors.black.withOpacity(0.1)),
                                shape: BoxShape.rectangle,
                                borderRadius: BorderRadius.circular(12)),
                          )
                        ],
                      )
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

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