import 'package:didvan/config/design_config.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/constants/app_icons.dart';
import 'package:didvan/views/podcasts/podcasts_state.dart';
import 'package:didvan/views/widgets/didvan/text.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class StudioTabBar extends StatelessWidget {
  const StudioTabBar({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final state = context.watch<PodcastsState>();
    return AnimatedContainer(
      duration: DesignConfig.lowAnimationDuration,
      margin: const EdgeInsets.symmetric(horizontal: 16),
      padding: const EdgeInsets.all(4),
      decoration: BoxDecoration(
        border: Border.all(
          color: Theme.of(context).colorScheme.border,
        ),
        borderRadius: DesignConfig.lowBorderRadius,
      ),
      child: Row(
        children: [
          Expanded(
            child: _StudioTypeButton(
              icon: DidvanIcons.video_solid,
              selectedColor: Theme.of(context).colorScheme.focusedBorder,
              title: 'ویدیو',
              onTap: () => state.videosSelected = true,
              isSelected: state.videosSelected,
            ),
          ),
          Container(
            width: 1,
            height: 32,
            color: Theme.of(context).colorScheme.border,
          ),
          Expanded(
            child: _StudioTypeButton(
              icon: DidvanIcons.podcast_solid,
              selectedColor: Theme.of(context).colorScheme.focusedBorder,
              title: 'پادکست',
              onTap: () => state.videosSelected = false,
              isSelected: !state.videosSelected,
            ),
          ),
        ],
      ),
    );
  }
}

class _StudioTypeButton extends StatelessWidget {
  final IconData icon;
  final String title;
  final VoidCallback onTap;
  final bool isSelected;
  final Color selectedColor;
  const _StudioTypeButton({
    Key? key,
    required this.icon,
    required this.selectedColor,
    required this.title,
    required this.onTap,
    required this.isSelected,
  }) : super(key: key);

  Color? _color(context) =>
      isSelected ? selectedColor : Theme.of(context).colorScheme.hint;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        onTap();
        FocusScope.of(context).unfocus();
      },
      child: Container(
        color: Colors.transparent,
        child: Column(
          children: [
            Icon(
              icon,
              size: 32,
              color: _color(context),
            ),
            AnimatedContainer(
              duration: DesignConfig.lowAnimationDuration,
              width: isSelected ? 88 : 0,
              height: 1,
              color: _color(context),
            ),
            DidvanText(
              title,
              style: Theme.of(context).textTheme.labelSmall,
              color: _color(context),
            )
          ],
        ),
      ),
    );
  }
}