import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/flutter_svg.dart';

class LinkWatchScreen extends ConsumerStatefulWidget{
  final int step;

  const LinkWatchScreen({super.key, required this.step});

  @override
  ConsumerState<LinkWatchScreen> createState() => LinkWatchScreenState();
}

class LinkWatchScreenState extends ConsumerState<LinkWatchScreen>{
  
  @override
  Widget build(BuildContext context) {
    final theme = ref.watch(themePortProvider);
    
    return Column(
      spacing: 32,
      children: [
        Stack(
          children: [
            Divider(
              color: theme.getColorFor(ThemeCode.buttonPrimary),
              thickness: 4,
              indent: 93,
              endIndent: 93,
              height: 48,
            ),
            if (widget.step==1)Divider(
              color: theme.getColorFor(ThemeCode.backgroundSecondary),
              thickness: 4,
              indent: 186,
              endIndent: 93,
              height: 48,
            ),
            Container(
              padding: EdgeInsets.symmetric(horizontal: 69),
              child: Row(
                children: [
                  Container(
                    decoration: ShapeDecoration(
                      shape: CircleBorder(),
                      color: theme.getColorFor(ThemeCode.buttonPrimary)
                    ),
                    width: 48,
                    height: 48,
                    child: Center(child: Text(
                      "1",
                      style: TextStyle(
                        color: theme.getColorFor(ThemeCode.backgroundPrimary),
                        fontSize: 24
                      )
                    ))
                  ),
                  Spacer(),
                  Container(
                    decoration: ShapeDecoration(
                      shape: CircleBorder(),
                      color: theme.getColorFor(widget.step==1 ? ThemeCode.backgroundSecondary : ThemeCode.buttonPrimary)
                    ),
                    width: 48,
                    height: 48,
                    child: Center(child: Text(
                      "2",
                      style: TextStyle(
                        color: theme.getColorFor(widget.step==1 ? ThemeCode.textPrimary : ThemeCode.backgroundSecondary),
                        fontSize: 24
                      )
                    ))
                  ),
                ],
              ),
            )
          ],
        ),
        Row(children: [
          Spacer(),
          Text("Escanea la correa"),
          Spacer(),
          Text("Escanea el reloj"),
          Spacer(),
        ]),
        Container(
          padding: EdgeInsets.all(40),
          decoration: BoxDecoration(
            border: Border.all(color: theme.getColorFor(ThemeCode.textPrimary)),
            borderRadius: BorderRadius.all(Radius.circular(16))
          ),
          child: SvgPicture.asset("assets/images/ui/qr.svg")
        ),
        if (widget.step == 2)Column(
          spacing: 16,
          children: [
            Align(
              alignment: Alignment.bottomLeft,
              child: Text("O inserta el código del reloj"),
            ),
            Row(
              spacing: 16,
              children: [
                Expanded(child: CustomTextField(
                  hint: "XXXXXXXXXX",
                )),
                Expanded(child: PrimaryButton(
                  onPressed: ()=>{},
                  text: "Continuar con código",
                  size: 16,
                  color: theme.getColorFor(ThemeCode.buttonSecondary)
                ))
              ],
            ),
          ],
        ),
        Column(
          spacing: 8,
          children: [
            Text("Si no consigues vincular su correa o reloj"),
            CustomTextButton(onPressed: ()=>{}, text: "Contáctanos", weight: FontWeight.w500, size: 18)
          ],
        )
      ],
    );
  }
}