import 'package:flutter/material.dart';
import 'package:readmore/readmore.dart';
import 'package:remever/common/resources.dart';
import 'package:remever/common/typography.dart';
import 'package:remever/common/widgets/w_if.dart';
import 'package:remever/components/extensions/context.dart';
import 'package:remever/gen/assets.gen.dart';
import 'package:remever/models/create_ticket_dto.dart';

class CrudTicket extends StatelessWidget {
  CrudTicket({
    super.key,
    this.onTextTap,
    this.onImageTap,
    required this.isQuestion,
    required this.dto,
  });

  void Function()? onTextTap;
  void Function()? onImageTap;
  final bool isQuestion;
  final CreateTicketDto dto;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTextTap,
      child: Container(
        width: double.infinity,
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.all(Radius.circular(12)).r,
          color: Colors.white,
        ),
        constraints: BoxConstraints(minHeight: 50.h),
        child: Stack(
          children: <Widget>[
            SizedBox(
              height: 50.h,
              width: double.infinity,
              child: DecoratedBox(decoration: getDecoration()),
            ),
            Padding(
              padding: const EdgeInsets.all(12).r,
              child: Column(
                children: <Widget>[
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[_buildImage(), _buildText(context)],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildText(BuildContext context) {
    return SizedBox(
      width: 228.w,
      child: ReadMoreText(
        isQuestion
            ? dto.question ?? 'Ввести текст вопроса'
            : dto.answer ?? 'Ввести текст ответа',
        isExpandable: true,
        trimMode: TrimMode.Line,
        trimLines: 3,
        trimCollapsedText: '\nРазвернуть',
        trimExpandedText: '\nСвернуть',
        style: Regular16px().style,
        moreStyle: Regular12px().style.copyWith(color: AppColors.primary_blue),
        lessStyle: Regular12px().style.copyWith(color: AppColors.primary_blue),
      ),
    );
  }

  /// Картинка
  Widget _buildImage() {
    return GestureDetector(
      onTap: onImageTap,
      child: Padding(
        padding: const EdgeInsets.only(right: 8).r,
        child: SizedBox.square(
          dimension: 64.r,
          child: DecoratedBox(
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.all(Radius.circular(8)).r,
              gradient: const LinearGradient(
                colors: <Color>[Color(0xFFDBD7F4), Color(0xFFB6AAFE)],
                begin: Alignment.topRight,
                end: Alignment.bottomLeft,
              ),
            ),
            child: Wif(
              condition:
                  isQuestion
                      ? dto.questionImage != null
                      : dto.answerImage != null,
              builder: (context) {
                return ClipRRect(
                  borderRadius: const BorderRadius.all(Radius.circular(8)).r,
                  child: Image.memory(
                    isQuestion ? dto.questionImage! : dto.answerImage!,
                    fit: BoxFit.cover,
                  ),
                );
              },
              fallback: (context) {
                return Center(
                  child: Assets.icons.typePhoto.image(
                    height: 24.h,
                    width: 24.w,
                    color: AppColors.primary,
                  ),
                );
              },
            ),
          ),
        ),
      ),
    );
  }

  /// Декорирование контейнера
  BoxDecoration getDecoration() {
    return BoxDecoration(
      borderRadius: const BorderRadius.all(Radius.circular(12)).r,
      gradient: LinearGradient(
        colors: <Color>[
          isQuestion ? AppColors.question : AppColors.answer,
          Colors.white,
        ],
        begin: Alignment.topLeft,
        end: const Alignment(-0.6, 1),
        stops: const <double>[0.25, 0.25],
      ),
    );
  }
}