import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/models/enums/translation_keys.dart';

import '../../app_style/app_color.dart';

class ContactUsBottomSheet extends StatelessWidget {
  const ContactUsBottomSheet({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300.toScreenHeight,
      clipBehavior: Clip.antiAlias,
      decoration: BoxDecoration(
        color: Theme.of(context).scaffoldBackgroundColor,
        borderRadius: const BorderRadius.only(
          topRight: Radius.circular(30),
          topLeft: Radius.circular(30),
        ),
      ),
      padding: EdgeInsets.symmetric(horizontal: 16.toScreenWidth, vertical: 8.toScreenHeight),
      child: Column(
        children: [
          Container(
            width: 40.toScreenWidth,
            height: 5.toScreenHeight,
            decoration: BoxDecoration(color: AppColor.neutral40, borderRadius: BorderRadius.circular(30)),
          ),
          Align(
            alignment: AlignmentDirectional.centerStart,
            child: Padding(
              padding: EdgeInsets.symmetric(vertical: 16.toScreenHeight),
              child: Text(
                context.translation.contactUs,
                style: Theme.of(context).textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w600),
              ),
            ),
          ),
          Row(
            children: [
              Expanded(child: _ContactCard(iconName: "phone", title: context.translation.callUs, subtitle: "+966 546345567")),
              16.width,
              Expanded(
                child: _ContactCard(
                  iconName: "whatsapp",
                  title: context.translation.liveChat,
                  subtitle: context.translation.openWhatsapp,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class _ContactCard extends StatelessWidget {
  final String iconName, title, subtitle;
  const _ContactCard({
    Key key,
    @required this.iconName,
    @required this.title,
    @required this.subtitle,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: EdgeInsets.all(16.toScreenWidth),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SvgPicture.asset(
              "assets/images/$iconName.svg",
              width: 32.toScreenWidth,
              color: context.isDark ? AppColor.primary40 : AppColor.primary70,
            ),
            30.height,
            Text(
              title,
              style: Theme.of(context).textTheme.titleLarge?.copyWith(color: context.isDark ? AppColor.neutral30 : AppColor.neutral50),
            ),
            Text(
              subtitle,
              style: Theme.of(context).textTheme.bodyMedium?.copyWith(color: context.isDark ? AppColor.neutral10 : AppColor.neutral20),
            ),
          ],
        ),
      ),
    );
  }
}
