import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart';
import 'package:tm_app/core/constants/assets.dart';
import 'package:tm_app/core/theme/colors.dart';
import 'package:tm_app/core/utils/size_config.dart';

import '../../../view_models/profile_view_model.dart';
import 'edit_key_word_bottom_sheet.dart';

class SubjectTab extends StatelessWidget {
  const SubjectTab({super.key});

  final bool isDesktop = true;

  @override
  Widget build(BuildContext context) {
    final viewModel = context.read<ProfileViewModel>();
    return Column(
      children: [
        SizedBox(height: 36.0.h()),
        _companyActivity(companyActivity: 'IT'),
        SizedBox(height: 24.0.h()),
        _budget(budget: 'Telecom Solutions GmbH'),
        SizedBox(height: 24.0.h()),
        _keyWord(
          onEditPressed: () {
            if (isDesktop) {
              showDialog(
                context: context,
                builder: (_) {
                  return Dialog(
                    child: SizedBox(
                      width: 560,
                      child: EditKeyWordBottomSheet(
                        isDesktop: true,
                        keyWords: viewModel.profileData?.keywords ?? [],
                        onSubmit: (keyWords) async {
                          context.pop();
                          await viewModel.updateProfileKeyWords(
                            keyWords: keyWords,
                          );
                        },
                      ),
                    ),
                  );
                },
              );
            } else {
              showModalBottomSheet(
                context: context,
                isScrollControlled: true,
                builder: (_) {
                  return EditKeyWordBottomSheet(
                    isDesktop: false,
                    keyWords: viewModel.profileData?.keywords ?? [],
                    onSubmit: (keyWords) async {
                      context.pop();
                      await viewModel.updateProfileKeyWords(keyWords: keyWords);
                    },
                  );
                },
              );
            }
          },
        ),
        SizedBox(height: 16.0.h()),
        Wrap(
          spacing: 8,
          runSpacing: 16.0.h(),
          // children: [
          //   _chip(label: 'UIUX', backgroundColor: Colors.green[200]!),
          //   _chip(label: 'Lorem ipsum', backgroundColor: Colors.orange[100]!),
          //   _chip(label: 'sample', backgroundColor: Colors.grey[300]!),
          //   _chip(label: 'Unknown', backgroundColor: Colors.red[200]!),
          //   _chip(label: 'Lorem ipsum 02', backgroundColor: Colors.blue[100]!),
          // ],
          children:
              viewModel.profileData!.keywords!
                  .map(
                    (e) => _chip(label: e, backgroundColor: Colors.green[200]!),
                  )
                  .toList(),
        ),
        SizedBox(height: 24.0.h()),
        Divider(color: AppColors.grey20),
        _location(onEditePressed: () {}),
      ],
    );
  }

  Widget _companyActivity({required String companyActivity}) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 8.0.w()),
      child: SizedBox(
        height: 43.0.h(),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Company Activity ',
              style: TextStyle(
                fontSize: 16.0.sp(),
                fontWeight: FontWeight.w400,
                color: AppColors.grey60,
              ),
            ),
            Text(
              companyActivity,
              style: TextStyle(
                fontSize: 16.0.sp(),
                fontWeight: FontWeight.w400,
                color: AppColors.grey80,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _budget({required String budget}) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 8.0.w()),
      child: SizedBox(
        height: 43.0.h(),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Budget',
              style: TextStyle(
                fontSize: 16.0.sp(),
                fontWeight: FontWeight.w400,
                color: AppColors.grey60,
              ),
            ),
            Text(
              budget,
              style: TextStyle(
                fontSize: 16.0.sp(),
                fontWeight: FontWeight.w400,
                color: AppColors.grey80,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _keyWord({required VoidCallback onEditPressed}) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 8.0.w()),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            'Key Word',
            style: TextStyle(
              fontSize: 16.0.sp(),
              fontWeight: FontWeight.w400,
              color: AppColors.grey60,
            ),
          ),
          IconButton(
            onPressed: onEditPressed,
            icon: SvgPicture.asset(
              AssetsManager.editting,
              colorFilter: ColorFilter.mode(AppColors.grey70, BlendMode.srcIn),
            ),
          ),
        ],
      ),
    );
  }

  Widget _chip({required String label, required Color backgroundColor}) {
    return Chip(
      label: Text(label),
      backgroundColor: backgroundColor,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8),
        side: const BorderSide(color: Colors.transparent),
      ),
    );
  }

  Widget _location({required VoidCallback onEditePressed}) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 8.0.w()),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            'Location',
            style: TextStyle(
              fontSize: 16.0.sp(),
              fontWeight: FontWeight.w400,
              color: AppColors.grey60,
            ),
          ),
          IconButton(
            onPressed: onEditePressed,
            icon: SvgPicture.asset(
              AssetsManager.editting,
              colorFilter: ColorFilter.mode(AppColors.grey70, BlendMode.srcIn),
            ),
          ),
        ],
      ),
    );
  }
}