import 'package:flutter/material.dart';

part 'card.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final Color _color = Colors.orangeAccent;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: _color,
        title: Text(widget.title),
      ),
      body: const Body(),
    );
  }
}

class Body extends StatelessWidget {
  const Body({super.key}); // ключи

  @override
  Widget build(BuildContext context) {
    final data = [
      _CardData(
          'mouse',
          descriptionText: 'hahaha',
          icon: Icons.abc,
          imageUrl:
          'https://sun34-1.userapi.com/impg/_DLT-op0LbBdgh5h-ILvC7IMDY5kbLR349v7vA/tX7vtk6mNlA.jpg?size=736x736&quality=96&sign=47f2b0f63bf249c62f4498fb637695d5&type=album'
      ),
      _CardData(
          'mouse2',
          descriptionText: 'ahahaha',
          icon: Icons.access_alarm_outlined,
          imageUrl:
          'https://sun165-1.userapi.com/impg/EVLbaLilqr8xw5tsqZLQQb6DSYrdKo7Q9sYSsw/H4FRwyMR6Ec.jpg?size=1280x960&quality=96&sign=f606e4ae3d1ccd27917cd1ffa6d91e58&type=album'
      ),
      _CardData(
          'mouse3',
          descriptionText: 'eeee',
          icon: Icons.access_alarm_rounded,
          imageUrl:
          'https://sun165-1.userapi.com/impg/Jxmp-zwq--f7KagZ6HuImLY7HrgQo-kyP1xhmw/JejdXP88_VE.jpg?size=736x981&quality=96&sign=5597f4d123422be17118ff4b1f570a9d&type=album'
      ),
    ];

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

class _CardState extends State<_Card> {
  bool isLiked = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(16),
      constraints: const BoxConstraints(minHeight: 140),
      decoration: BoxDecoration(
        color: Colors.white70,
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(.5),
            spreadRadius: 4,
            offset: const Offset(0, 5),
            blurRadius: 8,
          ),
        ],
      ),
      child: IntrinsicHeight(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ClipRRect(
              borderRadius: const BorderRadius.only(
                bottomLeft: Radius.circular(20),
                topLeft: Radius.circular(20),
              ),
              child: SizedBox(
                height: double.infinity,
                width: 120,
                child: Image.network(
                  widget.imageUrl ?? '',
                  fit: BoxFit.cover,
                  errorBuilder: (_, __, ___) => const Placeholder(),
                ),
              ),
            ),
            Expanded (
              child: Padding(
                padding: const EdgeInsets.only(left: 16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      widget.text,
                      style: Theme.of(context).textTheme.headlineLarge,
                    ),
                    Text(
                      widget.descriptionText,
                      style: Theme.of(context).textTheme.bodyLarge,
                    )
                  ],
                ),
              ),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Padding(
                padding: const EdgeInsets.only(
                  left: 8.0,
                  right: 16,
                  bottom: 16,
                ),
                child: GestureDetector(
                  onTap: () {
                    setState(() {
                      isLiked = !isLiked;
                    });
                  },
                  child: AnimatedSwitcher(
                    duration: const Duration(microseconds: 200),
                    child: isLiked
                        ? const Icon(
                      Icons.favorite,
                      color: Colors.redAccent,
                      key: ValueKey<int>(0),
                    )
                        : const Icon(
                      Icons.favorite_border,
                      key: ValueKey<int>(1),
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}