import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:intl/intl.dart';
import 'package:ride/views/widgets/elevated_btn.dart';

import '../../../constant/colors.dart';
import '../../../constant/style.dart';
import '../../../controller/home/map_page_controller.dart';

GetBuilder<MapController> buttomSheetMapPage() {
  return GetBuilder<MapController>(
      builder: (controller) => controller.isButtomSheetShown
          ? Positioned(
              left: 5,
              bottom: 0,
              right: 5,
              child: AnimatedContainer(
                // clipBehavior: Clip.antiAliasWithSaveLayer,
                curve: Curves.easeInCirc,
                onEnd: () {
                  controller.height = 250;
                },
                height: controller.heightButtomSheetShown,
                duration: const Duration(seconds: 2),
                child: Column(
                  children: [
                    controller.data.isEmpty
                        ? const SizedBox()
                        : Container(
                            // width: Get.width * .9,
                            height: 100,
                            decoration: BoxDecoration(
                                color: AppColor.secondaryColor,
                                boxShadow: [
                                  const BoxShadow(
                                      color: AppColor.accentColor,
                                      offset: Offset(2, 2)),
                                  BoxShadow(
                                      color:
                                          AppColor.accentColor.withOpacity(.4),
                                      offset: const Offset(-2, -2))
                                ],
                                borderRadius: const BorderRadius.all(
                                    Radius.circular(15))),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: Image.asset(
                                    'assets/images/jeep.png',
                                    width: 50,
                                    fit: BoxFit.fill,
                                    repeat: ImageRepeat.repeatX,
                                  ),
                                ),
                                Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                        '${'Your Ride Duration is '.tr}${controller.duration} minutes'),
                                    Text(
                                        'You will be thier in ${DateFormat('h:mm a').format(controller.newTime)}'),
                                    Text(
                                        'You trip distance is  ${controller.distance} KM')
                                  ],
                                ),
                                Text(
                                  'Fee is \n${controller.totalPassenger.toStringAsFixed(2)}',
                                  style: AppStyle.subtitle,
                                ),
                              ],
                            ),
                          ),
                    const SizedBox(
                      height: 5,
                    ),
                    Container(
                      // height: 130,
                      decoration: BoxDecoration(
                          color: AppColor.secondaryColor,
                          boxShadow: [
                            const BoxShadow(
                                color: AppColor.accentColor,
                                offset: Offset(2, 2)),
                            BoxShadow(
                                color: AppColor.accentColor.withOpacity(.4),
                                offset: const Offset(-2, -2))
                          ],
                          borderRadius:
                              const BorderRadius.all(Radius.circular(15))),
                      child: controller.data.isEmpty
                          ? const SizedBox()
                          : Center(
                              child: Padding(
                                padding:
                                    const EdgeInsets.symmetric(horizontal: 5),
                                child: Column(
                                  children: [
                                    Row(
                                      children: [
                                        const Icon(
                                          Icons.location_on,
                                          color: AppColor.redColor,
                                        ),
                                        const SizedBox(
                                          width: 10,
                                        ),
                                        Text(
                                          'From : '.tr,
                                          style: AppStyle.subtitle,
                                        ),
                                        Text(
                                          controller.data[0]['start_address']
                                              .toString(),
                                          style: AppStyle.subtitle,
                                        )
                                      ],
                                    ),
                                    Row(
                                      children: [
                                        const Icon(
                                            Icons.location_searching_rounded),
                                        const SizedBox(
                                          width: 10,
                                        ),
                                        Text(
                                          'To : '.tr,
                                          style: AppStyle.subtitle,
                                        ),
                                        Text(
                                          controller.data[0]['end_address'],
                                          style: AppStyle.subtitle,
                                        ),
                                      ],
                                    ),
                                    const Divider(
                                      color: AppColor.accentColor,
                                      thickness: 1,
                                      height: 2,
                                      indent: 1,
                                    ),
                                    SizedBox(
                                      height: 40,
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        children: [
                                          Container(
                                            decoration: BoxDecoration(
                                              color: AppColor.secondaryColor,
                                              borderRadius:
                                                  BorderRadius.circular(12),
                                              // border: Border.all(),
                                            ),
                                            child: Row(
                                              children: [
                                                Icon(
                                                  Icons.monetization_on,
                                                  color: Colors.green[400],
                                                ),
                                                InkWell(
                                                  onTap: () => controller
                                                      .changeCashConfirmPageShown(),
                                                  child: Text(
                                                    'CASH',
                                                    style: AppStyle.title,
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ),
                                          const SizedBox(
                                            width: 40,
                                          ),
                                          Container(
                                            decoration: BoxDecoration(
                                              color: AppColor.secondaryColor,
                                              borderRadius:
                                                  BorderRadius.circular(12),
                                            ),
                                            child: Row(
                                              children: [
                                                Icon(
                                                  Icons.qr_code_2_rounded,
                                                  color: Colors.green[400],
                                                ),
                                                Text(
                                                  'Add Promo'.tr,
                                                  style: AppStyle.title,
                                                ),
                                              ],
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                    MyElevatedButton(
                                      title: 'Confirm Selection',
                                      onPressed: () {},
                                    )
                                  ],
                                ),
                              ),
                            ),
                    ),
                  ],
                ),
              ),
            )
          : const SizedBox());
}

class Details extends StatelessWidget {
  const Details({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return GetBuilder<MapController>(
        builder: (controller) => Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Text(
                      'distance is ${controller.data[0]['distance']['text']}',
                      style: AppStyle.title,
                    ),
                    Text(
                      'duration is ${controller.data[0]['duration']['text']}',
                      style: AppStyle.title,
                    ),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Text(
                      'Cost for .21/km ${controller.cost.toStringAsFixed(2)} ',
                      style: AppStyle.title,
                    ),
                    Text(
                      'costDuration ${controller.averageDuration.toStringAsFixed(2)} is ${controller.costDuration.toStringAsFixed(2)} ',
                      style: AppStyle.title,
                    ),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Text(
                      'totalDriver  ${controller.totalDriver.toStringAsFixed(2)}',
                      style: AppStyle.title,
                    ),
                    Text(
                      'totaME  ${controller.totaME.toStringAsFixed(2)} ',
                      style: AppStyle.title,
                    ),
                  ],
                ),
                Text(
                  'Cost for passenger ${controller.totalPassenger.toStringAsFixed(2)} ',
                  style: AppStyle.title,
                ),
              ],
            ));
  }
}