import 'package:flutter/material.dart';
import 'package:Parlando/tiktok/style/style.dart';
import 'package:getwidget/getwidget.dart';
import 'package:tapped/tapped.dart';

import 'package:Parlando/extension/int_extension.dart';

class TikTokButtonColumn extends StatelessWidget {
  final double? bottomPadding;
  final bool isPraise;
  final bool isCollect;
  final bool isSharing;
  final Function? onPraise;
  final Function? onCollect;
  final Function? onShare;
  final Function? onAvatar;

  const TikTokButtonColumn({
    Key? key,
    this.bottomPadding,
    this.onPraise,
    this.onCollect,
    this.onShare,
    this.isPraise = false,
    this.isCollect = false,
    this.onAvatar,
    this.isSharing = false,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: SysSize.avatar,
      margin: EdgeInsets.only(
        bottom: bottomPadding ?? 50.px,
        right: 5.px,
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          FavoriteIcon(
            onFavorite: onPraise,
            isFavorite: isPraise,
          ),
          CollectIcon(
            onCollect: onCollect,
            isCollect: isCollect,
          ),
          isSharing
              ? const GFLoader()
              : _IconButton(
                  icon: IconToText(Icons.share, size: 20.px),
                  text: '分享',
                  onTap: onShare,
                ),
        ],
      ),
    );
  }
}

class FavoriteIcon extends StatelessWidget {
  const FavoriteIcon({
    Key? key,
    required this.onFavorite,
    this.isFavorite,
  }) : super(key: key);
  final bool? isFavorite;
  final Function? onFavorite;

  @override
  Widget build(BuildContext context) {
    return _IconButton(
      icon: IconToText(
        Icons.favorite_border_outlined,
        size: 20,
        color: isFavorite! ? ColorPlate.red : null,
      ),
      text: '点赞',
      onTap: onFavorite,
    );
  }
}

class CollectIcon extends StatelessWidget {
  const CollectIcon({
    Key? key,
    required this.onCollect,
    this.isCollect,
  }) : super(key: key);
  final bool? isCollect;
  final Function? onCollect;

  @override
  Widget build(BuildContext context) {
    return _IconButton(
      icon: IconToText(
        Icons.star_border_outlined,
        size: 20,
        color: isCollect! ? ColorPlate.red : null,
      ),
      text: '收藏',
      onTap: onCollect,
    );
  }
}

/// 把IconData转换为文字，使其可以使用文字样式
class IconToText extends StatelessWidget {
  final IconData? icon;
  final TextStyle? style;
  final double? size;
  final Color? color;

  const IconToText(
    this.icon, {
    Key? key,
    this.style,
    this.size,
    this.color,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      String.fromCharCode(icon!.codePoint),
      style: style ??
          TextStyle(
            fontFamily: 'MaterialIcons',
            fontSize: size ?? 15.px,
            inherit: true,
            color: color ?? ColorPlate.white,
          ),
    );
  }
}

class _IconButton extends StatelessWidget {
  final Widget? icon;
  final String? text;
  final Function? onTap;

  const _IconButton({
    Key? key,
    this.icon,
    this.text,
    this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var shadowStyle = TextStyle(
      shadows: [
        Shadow(
          color: Colors.black.withOpacity(0.15),
          offset: const Offset(0, 1),
          blurRadius: 1,
        ),
      ],
    );
    Widget body = Column(
      children: <Widget>[
        Tapped(
          onTap: onTap,
          child: icon ?? Container(),
        ),
        Container(height: 2.px),
        Text(
          text ?? '??',
          style: const TextStyle(
            fontSize: 12,
            color: ColorPlate.white,
          ),
        ),
      ],
    );
    return Container(
      padding: EdgeInsets.symmetric(vertical: 10.px),
      child: DefaultTextStyle(
        style: shadowStyle,
        child: body,
      ),
    );
  }
}