import 'package:fis_ui/index.dart';
import 'package:fis_lib_media_rt/interface/index.dart';
import 'package:fis_ui/interface/interactive_container.dart';
import 'package:flutter/material.dart';

class VolumeSlider4Mobile extends FStatefulWidget
    implements FInteractiveContainer {
  final IChannel? channel;
  final Color color;
  VolumeSlider4Mobile({required this.channel, required this.color});

  @override
  FState<FStatefulWidget> createState() {
    return _VolumeSliderState();
  }

  @override
  String get pageName => "VolumeSliderMobile";
}

class _VolumeSliderState extends FState<VolumeSlider4Mobile> {
  int _volume = 100;
  @override
  void initState() {
    super.initState();
    if (widget.channel == null) return;
    _volume = widget.channel!.volume;
  }

  @override
  FWidget build(BuildContext context) {
    return StatefulSlider(
      initVolume: _volume,
      iconColor: widget.color,
      onVolumeChanged: (volume) {
        if (widget.channel == null) return;
        widget.channel!.setVolume(volume.toInt());
      },
    );
  }

  @override
  void dispose() {
    super.dispose();
  }
}

class StatefulSlider extends FStatefulWidget {
  const StatefulSlider({
    super.key,
    required this.initVolume,
    required this.iconColor,
    required this.onVolumeChanged,
  });

  final int initVolume;
  final Color iconColor;
  final ValueCallback<int> onVolumeChanged;

  @override
  FState<StatefulSlider> createState() => _StatefulSliderState();
}

class _StatefulSliderState extends FState<StatefulSlider> {
  int volume = 100;
  @override
  void initState() {
    super.initState();
    volume = widget.initVolume;
  }

  @override
  FWidget build(BuildContext context) {
    return FContainer(
      height: 50,
      child: FRow(
        children: [
          FSizedBox(width: 10),
          FContainer(
            child: FIcon(
              Icons.volume_up,
              color: widget.iconColor,
            ),
          ),
          FExpanded(
            child: FSlider(
              min: 0,
              max: 100,
              divisions: 100,
              value: volume.toDouble(),
              onChanged: (value) {
                setState(() {
                  volume = value.toInt();
                });
              },
              onChangeEnd: (value) {
                widget.onVolumeChanged(volume);
              },
            ),
          ),
          FSizedBox(width: 10),
          FContainer(
            width: 30,
            child: FText(
              "$volume",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }
}
