import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:intl/intl.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 = 240;
                },
                height: controller.heightButtomSheetShown,
                duration: const Duration(seconds: 2),
                child: Column(
                  children: [
                    controller.data.isEmpty
                        ? const SizedBox()
                        : Container(
                            // 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: 88,
                                    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(
                                  '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: 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,
                                  ),
                                ],
                              ),
                            ),
                    ),
                  ],
                ),
              ),
            )
          : const SizedBox());
}