import 'package:didvan/config/design_config.dart';
import 'package:didvan/config/theme_data.dart';
import 'package:didvan/models/message_data/message_data.dart';
import 'package:didvan/pages/home/direct/direct_state.dart';
import 'package:didvan/pages/home/widgets/audio_visualizer.dart';
import 'package:didvan/utils/date_time.dart';
import 'package:didvan/widgets/didvan/divider.dart';
import 'package:didvan/widgets/didvan/text.dart';
import 'package:didvan/widgets/skeleton_image.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:persian_number_utility/persian_number_utility.dart';

class Message extends StatelessWidget {
  final MessageData message;
  const Message({Key? key, required this.message}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final firstMessageOfGroupId = context
        .read<DirectState>()
        .dailyMessages[message.createdAt.split('T').first]!
        .last;
    return Column(
      crossAxisAlignment: message.writedByAdmin
          ? CrossAxisAlignment.end
          : CrossAxisAlignment.start,
      children: [
        if (message.id == firstMessageOfGroupId)
          Center(
            child: Container(
              margin: const EdgeInsets.only(bottom: 12),
              padding: const EdgeInsets.all(4),
              decoration: BoxDecoration(
                color: Theme.of(context).colorScheme.splash,
                borderRadius: DesignConfig.lowBorderRadius,
              ),
              child: DidvanText(
                DateTime.parse(message.createdAt).toPersianDateStr(),
                style: Theme.of(context).textTheme.overline,
                color: DesignConfig.isDark
                    ? Theme.of(context).colorScheme.white
                    : Theme.of(context).colorScheme.black,
              ),
            ),
          ),
        Padding(
          padding: EdgeInsets.only(
            right: message.writedByAdmin ? 20 : 0,
            left: !message.writedByAdmin ? 20 : 0,
          ),
          child: Column(
            crossAxisAlignment: message.writedByAdmin
                ? CrossAxisAlignment.start
                : CrossAxisAlignment.end,
            children: [
              _MessageContainer(
                writedByAdmin: message.writedByAdmin,
                child: Column(
                  children: [
                    if (message.text != null) DidvanText(message.text!),
                    if (message.audio != null)
                      AudioVisualizer(
                        audioUrl: message.audio,
                        waveform: message.waveform,
                      ),
                    if (message.radar != null) const DidvanDivider(),
                    if (message.radar != null) const SizedBox(height: 4),
                    if (message.radar != null)
                      _ReplyRadarOverview(message: message),
                    if (message.radar != null) const SizedBox(height: 4),
                  ],
                ),
              ),
              const SizedBox(height: 4),
              DidvanText(
                DateTimeUtils.timeWithAmPm(message.createdAt),
                style: Theme.of(context).textTheme.overline,
                color: Theme.of(context).colorScheme.caption,
              ),
            ],
          ),
        ),
      ],
    );
  }
}

class _ReplyRadarOverview extends StatelessWidget {
  final MessageData message;
  const _ReplyRadarOverview({Key? key, required this.message})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SkeletonImage(
          imageUrl: message.radar!.image,
          height: 52,
          width: 52,
        ),
        const SizedBox(width: 8),
        Expanded(
          child: SizedBox(
            height: 52,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                DidvanText(
                  message.radar!.title,
                  style: Theme.of(context).textTheme.bodyText1,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  color: Theme.of(context).colorScheme.focusedBorder,
                ),
                Row(
                  children: [
                    DidvanText(
                      'رادار ' + message.radar!.categories.first.label,
                      style: Theme.of(context).textTheme.overline,
                      color: Theme.of(context).colorScheme.focusedBorder,
                    ),
                    const Spacer(),
                    DidvanText(
                      DateTimeUtils.momentGenerator(message.radar!.createdAt) +
                          ' | خواندن در ' +
                          message.radar!.timeToRead.toString() +
                          ' دقیقه',
                      color: Theme.of(context).colorScheme.focusedBorder,
                      style: Theme.of(context).textTheme.overline,
                    ),
                    // DidvanText('text'),
                  ],
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

class _MessageContainer extends StatelessWidget {
  final bool writedByAdmin;
  final Widget child;
  const _MessageContainer({
    Key? key,
    required this.writedByAdmin,
    required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        borderRadius: DesignConfig.highBorderRadius.copyWith(
          bottomLeft: writedByAdmin ? Radius.zero : null,
          bottomRight: !writedByAdmin ? Radius.zero : null,
        ),
        color: writedByAdmin ? null : Theme.of(context).colorScheme.focused,
        border: Border.all(
          color: Theme.of(context).colorScheme.border,
          width: 0.5,
        ),
      ),
      child: child,
    );
  }
}