import '../../../../export.dart';

class TemperatureWidget extends ConsumerWidget {
  const TemperatureWidget({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final temperature = ref.watch(vehicleProvider.select((vehicle) => vehicle));
    // final outsideTemperature = ref
    //     .watch(vehicleProvider.select((vehicle) => vehicle.outsideTemperature));
    final tempUnit =
        ref.watch(unitStateProvider.select((unit) => unit.temperatureUnit));

    TextStyle temperatureTextStyle = const TextStyle(
      fontFamily: 'BrunoAce',
      color: Colors.white,
      fontSize: 44,
    );

    TextStyle unitTextStyle = const TextStyle(
      fontFamily: 'BrunoAce',
      color: Color(0xFFC1D8FF),
      fontSize: 38,
    );

    return Container(
      width:
          442, // needs to be adjusted after the celsius and farenheight symbols are fixed
      height: 130, // Height of the oval
      //padding: const EdgeInsets.all(10),
      decoration: ShapeDecoration(
        gradient: const RadialGradient(
          colors: [
            Color.fromARGB(255, 19, 24, 75),
            Color.fromARGB(127, 0, 0, 0)
          ],
          stops: [0.0, 0.7],
          radius: 1,
        ),
        //color: Colors.grey,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(
              65), // Half of the height for an oval effect
          side: const BorderSide(
            color: Color.fromARGB(156, 0, 0, 0),
            width: 2,
          ),
        ),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // Inside temperature
          buildTemperatureRow(
            context,
            Icons.thermostat_outlined,
            "Inside",
            temperature.insideTemperature,
            tempUnit,
            temperatureTextStyle,
            unitTextStyle,
            false,
          ),
          const SizedBox(width: 10),
          // Outside temperature
          buildTemperatureRow(
            context,
            Icons.thermostat_outlined,
            "Outside",
            temperature.outsideTemperature,
            tempUnit,
            temperatureTextStyle,
            unitTextStyle,
            true,
          ),
        ],
      ),
    );
  }

  Widget buildTemperatureRow(
    BuildContext context,
    IconData icon,
    String label,
    double temperatureValue,
    TemperatureUnit tempUnit,
    TextStyle tempTextStyle,
    TextStyle unitTextStyle,
    bool isOutside,
  ) {
    int temperatureAsInt = temperatureValue.toInt();
    double convertedTemperature = tempUnit == TemperatureUnit.celsius
        ? temperatureAsInt.toDouble()
        : (temperatureAsInt * 9 / 5) + 32;

    // Format the temperature for display.
    String temperatureDisplay = tempUnit == TemperatureUnit.celsius
        ? '$temperatureAsInt'
        : convertedTemperature.toStringAsFixed(0);

    return Padding(
      padding: isOutside
          ? const EdgeInsets.only(
              right: 22) // Padding for the outside temperature
          : const EdgeInsets.only(
              left: 12), // Padding for the inside temperature
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(
            icon,
            color: const Color(0xFF2962FF),
            size: 48,
          ),
          const SizedBox(width: 4), // Space between icon and text
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                label,
                style: const TextStyle(
                  color: Color(0xFFC1D8FF),
                  fontSize: 26,
                ),
              ),
              RichText(
                text: TextSpan(
                  text: temperatureDisplay,
                  style: tempTextStyle,
                  children: <TextSpan>[
                    TextSpan(
                      text: tempUnit == TemperatureUnit.celsius ? '°C' : '°F',
                      style: unitTextStyle,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}