import 'package:cims_apps/application/assets/path_assets.dart';
import 'package:cims_apps/application/component/button/back_button_view.dart';
import 'package:cims_apps/application/component/button/button_view.dart';
import 'package:cims_apps/application/component/image/image_view.dart';
import 'package:cims_apps/application/component/list_tile/list_tile_view.dart';
import 'package:cims_apps/application/theme/color_palette.dart';
import 'package:cims_apps/core/utils/size_config.dart';
import 'package:cims_apps/core/utils/string_utils.dart';
import 'package:flutter/material.dart';

class SubscribeDetailView extends StatelessWidget {
  final String type;
  const SubscribeDetailView({Key? key, required this.type}) : super(key: key);

  Widget _stepper(
    TextTheme textTheme, {
    required String description,
    String? date,
    time,
    bool isActive = false,
    bool isDone = false,
    bool isLast = false,
  }) {
    return Container(
      padding: const EdgeInsets.only(top: 8.0, left: 16.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Column(
            children: [
              Padding(
                padding: const EdgeInsets.only(left: 2.0, top: 8.0),
                child: Icon(
                  Icons.circle_rounded,
                  size: 10,
                  color: isDone
                      ? ColorPalette.primary
                      : isActive
                          ? ColorPalette.primary
                          : ColorPalette.slate400,
                ),
              ),
              if (!isLast)
                ConstrainedBox(
                  constraints: BoxConstraints.expand(
                      height: SizeConfig.width * .2, width: 0.0),
                  child: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 4.0),
                    child: VerticalDivider(
                      color:
                          isDone ? ColorPalette.primary : ColorPalette.slate400,
                      thickness: 2.0,
                    ),
                  ),
                ),
            ],
          ),
          Padding(
            padding: const EdgeInsets.only(left: 16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.only(bottom: 8.0),
                  child: Text(
                    description,
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w600,
                      color: isDone
                          ? Colors.black87
                          : isActive
                              ? ColorPalette.primary
                              : ColorPalette.slate400,
                    ),
                  ),
                ),
                isDone
                    ? Row(
                        children: [
                          Text(date ?? ''),
                          const Padding(
                            padding: EdgeInsets.symmetric(horizontal: 4.0),
                            child: Icon(
                              Icons.circle,
                              size: 6,
                              color: ColorPalette.slate400,
                            ),
                          ),
                          Text(time ?? ''),
                        ],
                      )
                    : const SizedBox(),
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget _listProduct(BuildContext context) {
    TextTheme textTheme = Theme.of(context).textTheme;
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
      child: Column(
        children: [
          Row(
            children: [
              ImageView(
                image: PathAssets.imgProduct,
                width: SizeConfig.width * .1,
              ),
              Padding(
                padding: const EdgeInsets.only(left: 8.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'Gemilang Dana Kas Maxima',
                      style: textTheme.headlineSmall,
                    ),
                    Container(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 8.0, vertical: 2.0),
                        decoration: BoxDecoration(
                          color: ColorPalette.purple100,
                          border: Border.all(
                            width: 1,
                            color: ColorPalette.purple,
                          ),
                          borderRadius:
                              const BorderRadius.all(Radius.circular(24)),
                        ),
                        child: const Text(
                          'Money Market',
                          style: TextStyle(
                            color: ColorPalette.purple500,
                          ),
                        )),
                  ],
                ),
              ),
            ],
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                const Text('Investment Amount'),
                Text(
                  'Rp 2.000.000',
                  style: textTheme.headlineSmall,
                ),
              ],
            ),
          ),
          const Divider(
            color: ColorPalette.slate200,
          ),
        ],
      ),
    );
  }

  Widget _cardVA(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 16.0, bottom: 8.0),
      padding: const EdgeInsets.only(bottom: 16.0),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(width: 1, color: ColorPalette.slate200),
        borderRadius: const BorderRadius.all(Radius.circular(12)),
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(height: SizeConfig.height * .02),
            RichText(
                text: const TextSpan(children: [
              TextSpan(
                text: 'Transfer to  ',
                style: TextStyle(
                  color: ColorPalette.slate400,
                  fontWeight: FontWeight.normal,
                ),
              ),
              TextSpan(
                text: 'ABC Virtual Account',
                style: TextStyle(
                  color: ColorPalette.slate800,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ])),
            SizedBox(height: SizeConfig.height * .01),
            const Text(
              'Ferdy Maulana',
              style: TextStyle(
                color: Colors.black87,
                fontSize: 16,
              ),
            ),
            ListTileView(
              title: '8785 0000 3165 5512',
              prefixIcon: const SizedBox(),
              padding: const EdgeInsets.only(right: 16.0),
              margin: const EdgeInsets.only(top: 8.0, bottom: 8.0),
              textStyle: const TextStyle(
                  fontWeight: FontWeight.bold, color: ColorPalette.primary),
              suffixIcon: ButtonView(
                name: 'Copy',
                width: SizeConfig.width * .3,
                height: SizeConfig.height * .052,
                sizeBorderRadius: 8.0,
                widthPrefix: 8.0,
                marginVertical: 10.0,
                prefixIcon: const Icon(
                  Icons.file_copy_outlined,
                  color: Colors.white,
                  size: 20,
                ),
                onPressed: () {
                  StringUtils.iCopyToClipboard(
                    context,
                    text: '8785 0000 3165 5512',
                  );
                },
              ),
            ),
            const Divider(color: ColorPalette.slate200),
            const Text(
              'Amount to be transferred',
              style: TextStyle(
                color: Colors.black87,
                fontSize: 16,
              ),
            ),
            ListTileView(
              title: 'Rp 10.000.000',
              prefixIcon: const SizedBox(),
              padding: const EdgeInsets.only(right: 16.0),
              margin: const EdgeInsets.only(top: 8.0),
              textStyle: const TextStyle(
                  fontWeight: FontWeight.bold, color: ColorPalette.primary),
              suffixIcon: ButtonView(
                name: 'Copy',
                width: SizeConfig.width * .3,
                height: SizeConfig.height * .052,
                sizeBorderRadius: 8.0,
                widthPrefix: 8.0,
                marginVertical: 10.0,
                prefixIcon: const Icon(
                  Icons.file_copy_outlined,
                  color: Colors.white,
                  size: 20,
                ),
                onPressed: () {
                  StringUtils.iCopyToClipboard(
                    context,
                    text: '10.000.000',
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _cardContent(BuildContext context) {
    TextTheme textTheme = Theme.of(context).textTheme;
    List mySteps = const [
      {
        'desc': 'Payment Being Verified',
        'date': '07 Feb 2024 ',
        'time': '21:01',
        'isActive': false,
        'isDone': true,
        'isLast': false,
      },
      {
        'desc': 'Successful Payment',
        'date': '07 Feb 2024 ',
        'time': '21:01',
        'isActive': true,
        'isDone': false,
        'isLast': false,
      },
      {
        'desc': 'Investment Manager Verification',
        'date': '07 Feb 2024 ',
        'time': '21:01',
        'isActive': false,
        'isDone': false,
        'isLast': false,
      },
      {
        'desc': 'Successful Purchase',
        'date': '07 Feb 2024 ',
        'time': '21:01',
        'isActive': false,
        'isDone': false,
        'isLast': true,
      },
    ];

    return SingleChildScrollView(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Icon(Icons.access_time, color: ColorPalette.slate400),
              const Padding(
                padding: EdgeInsets.symmetric(horizontal: 8.0),
                child: Text('Waiting for Payment'),
              ),
              Text('23:56:42', style: textTheme.headlineSmall),
            ],
          ),
          type == 'virtual' ? _cardVA(context) : const SizedBox(),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: Text('Purchase Details', style: textTheme.headlineSmall),
          ),
          Container(
            margin: const EdgeInsets.symmetric(vertical: 8.0),
            padding: const EdgeInsets.only(bottom: 16.0),
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(width: 1, color: ColorPalette.slate200),
              borderRadius: const BorderRadius.all(Radius.circular(12)),
            ),
            child: ExpansionTile(
              shape: ShapeBorder.lerp(
                  const StadiumBorder(side: BorderSide.none),
                  InputBorder.none,
                  0),
              title: Row(
                children: [
                  ImageView(
                    image: PathAssets.iconEducation,
                    width: SizeConfig.width * .08,
                  ),
                  const Padding(
                    padding: EdgeInsets.only(left: 8.0),
                    child: Text('Education'),
                  ),
                ],
              ),
              subtitle: Padding(
                padding: const EdgeInsets.only(left: 40.0),
                child: Text('3 Subscriptions', style: textTheme.bodyMedium),
              ),
              children: [
                _listProduct(context),
                _listProduct(context),
              ],
            ),
          ),
          ...mySteps.map((e) {
            return _stepper(
              textTheme,
              description: '${e['desc']}',
              date: e['date'],
              time: e['time'],
              isActive: e['isActive'],
              isDone: e['isDone'],
              isLast: e['isLast'],
            );
          }),
          Container(
              margin: const EdgeInsets.symmetric(vertical: 8.0),
              // padding: const EdgeInsets.only(bottom: 16.0),
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(width: 1, color: ColorPalette.slate200),
                borderRadius: const BorderRadius.all(Radius.circular(12)),
              ),
              child: ExpansionTile(
                  shape: ShapeBorder.lerp(
                      const StadiumBorder(side: BorderSide.none),
                      InputBorder.none,
                      0),
                  title: Row(
                    children: [
                      const Expanded(
                          child: Text('When Is My Purchase Complete?')),
                      ImageView(
                        image: PathAssets.imgExpandPurchase,
                        width: SizeConfig.width * .15,
                      ),
                    ],
                  ))),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        child: Stack(
          children: [
            const ImageView(image: PathAssets.imgDashboardAccount),
            Column(
              children: [
                SizedBox(height: SizeConfig.height * .05),
                Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      BackButtonView(
                        onPress: () => Navigator.pop(context),
                      ),
                      const Padding(
                        padding: EdgeInsets.symmetric(horizontal: 80.0),
                        child: Text(
                          'Subscribe Detail',
                          style: TextStyle(
                            fontSize: 18,
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                type == 'virtual'
                    ? const Padding(
                        padding: EdgeInsets.only(bottom: 8.0),
                        child: Text(
                          'Virtual Account',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 16,
                          ),
                        ),
                      )
                    : const SizedBox(),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ImageView(
                      image: PathAssets.imgProduct,
                      width: SizeConfig.width * .08,
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 8.0),
                      child: Text(
                        type == 'virtual' ? 'ABC' : 'Shopping Pay',
                        style: const TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ],
                ),
                const Padding(
                  padding: EdgeInsets.only(top: 8.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        'No.Subscribe : ',
                        style: TextStyle(
                          fontWeight: FontWeight.normal,
                          color: Colors.white,
                        ),
                      ),
                      Text(
                        'PI9393084SDMI1',
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                    ],
                  ),
                ),
                Expanded(
                  child: Container(
                    color: Colors.transparent,
                    width: SizeConfig.width,
                    padding: const EdgeInsets.only(top: 16.0),
                    child: Container(
                        margin: const EdgeInsets.only(top: 32.0),
                        padding: const EdgeInsets.only(top: 32.0),
                        decoration: const BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(24),
                              topRight: Radius.circular(24)),
                        ),
                        child: _cardContent(context)),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}