import 'package:didvan/config/design_config.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/models/category.dart';
import 'package:didvan/views/widgets/animated_visibility.dart';
import 'package:didvan/views/widgets/didvan/text.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class CategoryItem extends StatelessWidget {
  final CategoryData category;
  final bool isColapsed;
  final VoidCallback onSelected;

  const CategoryItem({
    Key? key,
    required this.isColapsed,
    required this.category,
    required this.onSelected,
  }) : super(key: key);

  double _width(context) {
    final Size ds = MediaQuery.of(context).size;
    if (kIsWeb) {
      if (!_useWebMobileLayout(context)) {
        return ds.height / 16 * 9 / 3;
      }
    }
    return ds.width / 3;
  }

  bool _useWebMobileLayout(context) {
    final shortestSide = MediaQuery.of(context).size.shortestSide;
    final bool useMobileLayout = shortestSide < 600;
    return kIsWeb && useMobileLayout;
  }

  @override
  Widget build(BuildContext context) {
    final Size ds = MediaQuery.of(context).size;
    return Center(
      child: GestureDetector(
        onTap: onSelected,
        child: AnimatedContainer(
          duration: DesignConfig.mediumAnimationDuration,
          padding: isColapsed ? const EdgeInsets.all(4) : EdgeInsets.zero,
          width: isColapsed ? 100 : _width(context),
          alignment: Alignment.center,
          decoration: BoxDecoration(
            borderRadius: DesignConfig.lowBorderRadius,
            border: isColapsed
                ? Border.all(color: Theme.of(context).colorScheme.focusedBorder)
                : null,
          ),
          child: Column(
            children: [
              AnimatedVisibility(
                duration: DesignConfig.mediumAnimationDuration,
                isVisible: !isColapsed,
                child: Container(
                  width: !_useWebMobileLayout(context)
                      ? _width(context) / 2
                      : ds.width / 7,
                  height: !_useWebMobileLayout(context)
                      ? _width(context) / 2
                      : ds.width / 7,
                  decoration: BoxDecoration(
                    color: Theme.of(context).colorScheme.surface,
                    boxShadow: DesignConfig.defaultShadow,
                    borderRadius: DesignConfig.mediumBorderRadius,
                  ),
                  padding: const EdgeInsets.all(8),
                  child: SvgPicture.asset(category.asset!),
                ),
              ),
              const SizedBox(
                height: 8,
              ),
              DidvanText(
                category.label,
                style: Theme.of(context).textTheme.titleSmall,
                color: Theme.of(context).colorScheme.title,
              ),
            ],
          ),
        ),
      ),
    );
  }
}