import 'package:flutter/material.dart';

import '../../../controllers/localization/localization.dart';
import '../../../models/device/device.dart';
import '../../../models/subtitle.dart';
import '../../app_style/colors.dart';
import '../../app_style/sizing.dart';
import 'single_device_picker.dart';

class DeviceButton extends StatelessWidget {
  final Function(Device?) onDevicePick;
  final Device? device;

  const DeviceButton({Key? key, required this.device, required this.onDevicePick}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Subtitle? _subtitle = AppLocalization.of(context)?.subtitle;
    return ElevatedButton(
        style: ElevatedButton.styleFrom(
          elevation: 0,
          padding: EdgeInsets.symmetric(horizontal: 16, vertical: device == null ? 12 : 8),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(AppStyle.borderRadius * AppStyle.getScaleFactor(context)),
          ),
          foregroundColor: AColors.primaryColor,
          backgroundColor: AColors.inputFieldBackgroundColor,
        ),
        child: Row(
          children: [
            device == null
                ? Expanded(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 6),
                      child: Text(
                        _subtitle?.pickDevice ?? "",
                        style: Theme.of(context).textTheme.subtitle1,
                        textScaleFactor: AppStyle.getScaleFactor(context),
                        textDirection: TextDirection.rtl,
                        textAlign: TextAlign.left,
                      ),
                    ),
                  )
                : Expanded(
                    child: ListTile(
                    contentPadding: EdgeInsets.all(0),
                    title: Text(
                      "${_subtitle?.sn ?? ""} : ${device?.serialNumber ?? ""}",
                      style: Theme.of(context).textTheme.subtitle1,
                    ),
                    subtitle: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Divider(
                          color: Theme.of(context).textTheme.subtitle1?.color,
                        ),
                        Text(
                          "${_subtitle?.brand} : ${device?.brand}",
                          style: Theme.of(context).textTheme.subtitle2,
                        ),
                        Divider(
                          color: Theme.of(context).textTheme.subtitle1?.color,
                        ),
                        Text(
                          "${_subtitle?.model} : ${device?.model}",
                          style: Theme.of(context).textTheme.subtitle2,
                        ),
                      ],
                    ),
                  )),
            const Icon(Icons.keyboard_arrow_down, size: 28, color: AColors.grey3A),
          ],
        ),
        onPressed: () async {
          Device? device = await Navigator.of(context).pushNamed(SingleDevicePicker.id) as Device?;
          onDevicePick(device);
        });
  }
}