import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:test_sa/controllers/localization/localization.dart';
import 'package:test_sa/models/device/device.dart';
import 'package:test_sa/models/subtitle.dart';
import 'package:test_sa/views/app_style/colors.dart';
import 'package:test_sa/views/app_style/sizing.dart';
import 'package:test_sa/views/widgets/equipment/single_device_picker.dart';

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

  const DeviceButton({Key key, this.device, 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: [
            FaIcon(
              FontAwesomeIcons.hardDrive,
              size: 28,
              color: AColors.black,
            ),
            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.modelDefinition.manufacturerName}",
                          style: Theme.of(context).textTheme.subtitle2,
                        ),
                        Divider(
                          color: Theme.of(context).textTheme.subtitle1.color,
                        ),
                        Text(
                          "${_subtitle.model} : ${device.modelDefinition.modelName}",
                          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);
        });
  }
}