import 'package:flutter/material.dart';

import 'comment_model.dart';
import 'user_model.dart';

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

  @override
  Widget build(BuildContext context) {
    final data = [
      CommentModel(
        title: 'Oh my god',
        text: 'this app is so cool ' * 10,
        user: UserModel(
          nickname: 'Steve',
          avatarUrl:
          'https://preview.free3d.com/img/2016/03/1875481443430303321/hld8c0oa.jpg',
        ),
      ),
      CommentModel(
        title: 'Listen to me',
        text: 'This app is like Half-Life 3 - it will never be released',
        user: UserModel(
          nickname: 'G-Man',
          avatarUrl:
          'https://us-tuna-sounds-images.voicemod.net/356aeabd-18d5-40d8-af31-b479f4eff183-1704672174928.png',
        ),
      ),
      CommentModel(
        title: 'BREAKING!!!',
        text: 'The next lab work will have DLC in the form of likes',
        user: UserModel(
          nickname: 'Bethesda',
          avatarUrl: 'https://i.playground.ru/p/BWixorSTeZQfoPvdVL9lgA.jpeg',
        ),
      ),
      CommentModel(
        title: 'Test',
        text: 'Test',
        user: UserModel(
          nickname: 'Noname',
        ),
      ),
      CommentModel(
        title: 'Test',
        text: 'Test',
        user: UserModel(
          nickname: 'Noname',
        ),
      ),
    ];

    return SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: data.map((e) => _Comment.fromData(e)).toList(),
      ),
    );
  }
}

class _Comment extends StatelessWidget {
  final String title;
  final String text;
  final UserModel? user;

  const _Comment({
    required this.title,
    required this.text,
    this.user,
  });

  factory _Comment.fromData(CommentModel model) => _Comment(
    title: model.title,
    text: model.text,
    user: model.user,
  );

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(16),
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white70,
        borderRadius: BorderRadius.circular(16),
        border: Border.all(color: Colors.grey),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(.5),
            spreadRadius: 4,
            offset: const Offset(0, 5),
            blurRadius: 8,
          ),
        ],
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Column(
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(30),
                child: SizedBox(
                  height: 80,
                  width: 80,
                  child: Image.network(
                    user!.avatarUrl != null && user!.avatarUrl!.isNotEmpty
                        ? user!.avatarUrl!
                        : '',
                    fit: BoxFit.cover,
                    errorBuilder: (_, __, ___) => const Placeholder(),
                  ),
                ),
              ),
              const SizedBox(height: 8),
              Text(
                user!.nickname,
                style: Theme.of(context).textTheme.bodyMedium,
              ),
            ],
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.only(left: 16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: Theme.of(context).textTheme.headlineSmall,
                  ),
                  const SizedBox(height: 8),
                  Text(
                    text,
                    style: Theme.of(context).textTheme.bodyLarge,
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}