import 'package:flutter/material.dart';

import 'package:flutter_slidable/flutter_slidable.dart';
import 'package:go_router/go_router.dart';
import 'package:badges/badges.dart' as badges;

import 'package:together_mobile/common/constants.dart';
import 'package:together_mobile/components/badge_avatar.dart';

class ChatTile extends StatelessWidget {
  const ChatTile({super.key});

  @override
  Widget build(BuildContext context) {
    return Slidable(
      key: const ValueKey(0),
      endActionPane: ActionPane(
        motion: const BehindMotion(),
        dismissible: DismissiblePane(
          onDismissed: () {},
        ),
        children: [
          SlidableAction(
            onPressed: (BuildContext context) {},
            backgroundColor: kSecondaryColor,
            foregroundColor: kContentColorDark,
            icon: Icons.arrow_upward_rounded,
            label: '置顶',
          ),
          SlidableAction(
            onPressed: (BuildContext context) {},
            foregroundColor: kContentColorDark,
            backgroundColor: kPrimaryColor,
            icon: Icons.lock,
            label: '隐藏记录',
            flex: 1,
          ),
        ],
      ),
      child: ListTile(
        // Must have a onTap callback or Ink won't work
        onTap: () => context.go('/message'),
        leading: const BadgeAvatar(
          count: 12,
          radius: 25,
          backgroundImage: AssetImage('assets/images/user_2.png'),
        ),
        title: const Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              child: Text(
                'HeadLine',
                overflow: TextOverflow.ellipsis,
              ),
            ),
            Text('10:13'),
          ],
        ),
        subtitle: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              child: Text(
                'How are you today, you look not very well, whats happended to you',
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                    color: Theme.of(context).textTheme.displayLarge?.color),
              ),
            ),
            // Text('10:13'),
          ],
        ),
      ),
    );
  }
}