import 'package:flutter/material.dart';
import 'package:gallery/data_provider/data_provider.dart';
import 'package:gallery/hover_detector.dart';
import 'package:gallery/utils/tile_size.dart';

class ImageTile extends StatelessWidget {
  const ImageTile(
      {Key? key, this.onClick, this.child, this.imageUri, this.dtaProvider})
      : super(key: key);
  final Function? onClick;
  final Widget? child;
  final Uri? imageUri;
  final DataProvider? dtaProvider;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () {
          onClick?.call();
        },
        child: Container(
          padding: const EdgeInsets.all(3),
          child: imageUri == null
              ? HoverDetector(
                  defaultChild: _renderIcon(false),
                  hoverChild: _renderIcon(true))
              : HoverDetector(
                  defaultChild: _renderImage(false),
                  hoverChild: _renderImage(true)),
        ));
  }

  Widget _renderIcon(bool border) {
    return Container(
        decoration: BoxDecoration(
            color: Colors.white,
            border: border
                ? Border.all(color: const Color(0x7f444444), width: 3)
                : null,
            borderRadius:
                BorderRadius.all(Radius.circular(calcTileMaxWidth() / 30)),
            boxShadow: [
              BoxShadow(
                  color: Colors.black12,
                  spreadRadius: calcTileMaxWidth() / 150,
                  blurRadius: calcTileMaxWidth() / 60),
            ]),
        child: child);
  }

  Widget _renderImage(bool border) {
    final image = Image(
      fit: BoxFit.cover,
      filterQuality: FilterQuality.high,
      frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
        return frame == null
            ? const Center(
                child: CircularProgressIndicator(),
              )
            : child;
      },
      image: dtaProvider!.getImageProvider(imageUri!),
    );

    return Container(
        decoration: BoxDecoration(
            border: border
                ? Border.all(color: const Color(0x7f444444), width: 3)
                : null,
            borderRadius: BorderRadius.all(
                Radius.circular(calcTileMaxWidth() / (border ? 25 : 30))),
            boxShadow: [
              BoxShadow(
                  color: Colors.black12,
                  spreadRadius: calcTileMaxWidth() / 150,
                  blurRadius: calcTileMaxWidth() / 60),
            ]),
        child: ClipRRect(
          borderRadius: BorderRadius.all(
            Radius.circular(calcTileMaxWidth() / 30),
          ),
          child: image,
        ));
  }
}