import 'package:flutter/material.dart';
import 'package:skillcourt/widgets/brightness_button.dart';
import 'package:skillcourt/widgets/color_picker.dart';
import 'package:skillcourt/widgets/custom_appbar.dart';
import 'package:skillcourt/widgets/faq_page.dart';

class SettingsPage extends StatelessWidget {
  static const routeName = 'SettingsPage';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: const CustomAppBar(title: 'Settings'),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Padding(
            padding: EdgeInsets.only(left: 16.0),
            child: Text('Personalize your Agipad lights:'),
          ),
          Expanded(
            flex: 1,
            child: ListView(
              padding: const EdgeInsets.symmetric(vertical: 1.0, horizontal: 1.0),
              children: [
                _SettingSelectorWidget(
                  imagePath: 'assets/images/color_wheel_visual_sm.png',
                  textName: 'Edit color',
                  onPressed: () {
                    Navigator.pushNamed(context, ColorPicker.routeName);
                  },
                ),
                const Padding(padding: EdgeInsets.only(top: 5.0)),
                _SettingSelectorWidget(
                  imagePath: 'assets/images/sun_visual_sm.png',
                  textName: 'Edit brightness',
                  onPressed: () {
                    Navigator.pushNamed(context, BrightnessButton.routeName);
                  },
                ),
                const Padding(padding: EdgeInsets.only(top: 5.0)),
                QuestionsCardWidget(),
                const Padding(padding: EdgeInsets.only(top: 5.0)),
                _SettingFeedbackWidget(
                  imagePath: 'assets/images/send_feedback_icon.png',
                  textName: 'Send feedback',
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Widget _SettingSelectorWidget({
  required String imagePath,
  required String textName,
  required void Function() onPressed,
}) {
  return GestureDetector(
    onTap: onPressed,
    child: Semantics(
      label: '',
      child: Container(
        width: 200.0,
        height: 65.0,
        margin: const EdgeInsets.only(top: 24.0, left: 16.0, right: 16.0),
        decoration: BoxDecoration(
          color: Color(0xFFDEDEDE),
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: Row(
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 16.0),
              child: Image.asset(
                imagePath,
                fit: BoxFit.cover,
              ),
            ),
            const SizedBox(width: 16.0),
            Text(
              textName,
              style: const TextStyle(
                fontFamily: 'Product Sans',
                fontWeight: FontWeight.w400,
                fontSize: 18.0,
                color: Color(0xFF323438),
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

Widget _SettingFeedbackWidget({required String imagePath, required String textName}) {
  return Semantics(
    label: '',
    child: Container(
      width: 200.0,
      height: 65.0,
      margin: const EdgeInsets.only(top: 24.0, left: 16.0, right: 16.0),
      decoration: BoxDecoration(
        color: Color(0xFFDEDEDE),
        borderRadius: BorderRadius.circular(8.0),
      ),
      child: Row(
        children: [
          const SizedBox(width: 16.0),
          Text(
            textName,
            style: const TextStyle(
              fontFamily: 'Product Sans',
              fontWeight: FontWeight.w400,
              fontSize: 18.0,
              color: Color(0xFF323438),
            ),
          ),
          const Spacer(),
          Padding(
            padding: EdgeInsets.only(left: 16.0),
            child: Image.asset(
              imagePath,
              fit: BoxFit.cover,
            ),
          ),
          const SizedBox(width: 16.0),
        ],
      ),
    ),
  );
}

class QuestionsCardWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 24.0, left: 16.0, right: 16.0),
      decoration: BoxDecoration(
        border: Border.all(color: const Color(0xFFDEDEDE), width: 2.0),
        borderRadius: BorderRadius.circular(8.0),
      ),
      child: Card(
        elevation: 0.0,
        borderOnForeground: true,
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Row(
            children: [
              Expanded(
                flex: 2,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'Got questions?',
                      style: const TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(
                      width: 150.0,
                      child: Text(
                        'We got answers! Check out the FAQ.',
                        style: const TextStyle(
                          fontSize: 14,
                        ),
                      ),
                    ),
                    const SizedBox(height: 15),
                    ElevatedButton(
                      onPressed: () {
                        Navigator.pushNamed(context, FAQPage.routeName);
                      },
                      style: ElevatedButton.styleFrom(
                        fixedSize: const Size(104, 32),
                        backgroundColor: Color(0xFF323438),
                        foregroundColor: Color(0xFFDEDEDE),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(15),
                        ),
                      ),
                      child: Text('FAQ'),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
