import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';

enum AqiType {
  aqi('AQI', '', 'aqi'),
  pm25('PM2.5', 'µg/m³', 'pm25'),
  pm10('PM10', 'µg/m³', 'pm10'),
  hcho('HCHO', 'mg/m³', 'ch2o'),
  tvoc('TVOC', 'mg/m³', 'voc'),
  co2('CO2', 'ppm', 'co2');

  const AqiType(this.value, this.unit, this.code);

  final String value;
  final String unit;
  final String code;
}

class AqiTypeDropdown extends StatefulWidget {
  const AqiTypeDropdown({
    required this.onChanged,
    this.selectedAqiType,
    super.key,
  });

  final ValueChanged<AqiType?> onChanged;
  final AqiType? selectedAqiType;

  @override
  State<AqiTypeDropdown> createState() => _AqiTypeDropdownState();
}

class _AqiTypeDropdownState extends State<AqiTypeDropdown> {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        border: Border.all(
          color: ColorsManager.greyColor,
          width: 1,
        ),
      ),
      child: DropdownButton<AqiType>(
        value: widget.selectedAqiType,
        isDense: true,
        borderRadius: BorderRadius.circular(16),
        dropdownColor: ColorsManager.whiteColors,
        underline: const SizedBox.shrink(),
        icon: const RotatedBox(
          quarterTurns: 1,
          child: Icon(Icons.chevron_right, size: 24),
        ),
        style: _getTextStyle(context),
        padding: const EdgeInsetsDirectional.symmetric(
          horizontal: 12,
          vertical: 2,
        ),
        items: AqiType.values
            .map((e) => DropdownMenuItem(value: e, child: Text(e.value)))
            .toList(),
        onChanged: widget.onChanged,
      ),
    );
  }

  TextStyle? _getTextStyle(BuildContext context) {
    return context.textTheme.labelSmall?.copyWith(
      color: ColorsManager.textPrimaryColor,
      fontWeight: FontWeight.w700,
      fontSize: 12,
    );
  }
}
