import 'package:flutter/material.dart';
import 'package:loris/business_logic/notifications/notifs.dart';
import 'package:loris/pages/profile_view/profile_view.dart';
import 'package:loris/partials/post.dart';
import '../../global.dart' as global;

class SingleNotif extends StatelessWidget {
  const SingleNotif({
    required this.model,
    Key? key,
  }) : super(key: key);
  final NotificationModel model;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8),
      child: Align(
        child: Container(
          width:
              (MediaQuery.of(context).size.width * global.settings!.postWidth) -
                  56,
          constraints: BoxConstraints(
            maxWidth: global.settings!.maxPostWidth,
            minWidth: 375,
          ),
          padding: const EdgeInsets.all(24),
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.surface,
            border: Border.all(color: Theme.of(context).colorScheme.secondary),
            borderRadius: BorderRadius.circular(8),
          ),
          child: Column(
            children: [
              InkWell(
                onTap: () => showDialog(
                  context: context,
                  builder: (context) => ProfileView(model: model.account),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    ProfilePic(url: model.account.avatar),
                    const SizedBox(
                      width: 8,
                    ),
                    Expanded(
                      flex: 20,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          SelectableText(
                            model.account.displayName,
                            style: Theme.of(context).textTheme.displaySmall,
                          ),
                          SelectableText.rich(
                            TextSpan(
                              text: "${model.account.acct} ",
                              style: Theme.of(context).textTheme.bodySmall,
                              children: [
                                TextSpan(
                                    text: model.type.actionName,
                                    style:
                                        Theme.of(context).textTheme.bodyMedium)
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                    Icon(
                      model.type.icon,
                      size: 64,
                    ),
                  ],
                ),
              ),
              const SizedBox(
                height: 8,
              ),
              (model.post != null)
                  ? (Post(
                      reblogVisible: false,
                      model: model.post!,
                    ))
                  : const SizedBox(
                      width: 0,
                      height: 0,
                    ),
            ],
          ),
        ),
      ),
    );
  }
}