class DeviceItem extends StatefulWidget {
  DeviceItem({Key key, this.data}) : super(key: key);

  final DeviceModel data;

  @override
  _DeviceItemState createState() => _DeviceItemState();
}

class _DeviceItemState extends State<DeviceItem> {
  RelayAnimController controller;

  @override
  void initState() {
    controller = RelayAnimController(widget.data.relayState);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 77.0,
      child: GestureDetector(
        onTap: () => _navigateToDeviceEdit(context),
        child: Column(
          children: <Widget>[
            Container(
              color: AppColors.divider,
              height: 1.0,
            ),
            Container(
              color: AppColors.primary,
              height: 76.0,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  _serialNumber,
                  _modelAndTitle,
                  _connectionState,
                  _relayState
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  /// Serial number with decoration widget
  get _serialNumber => Stack(
        children: <Widget>[
          Container(
            color: AppColors.deviceItemConnector,
            margin: EdgeInsets.only(
              left: 27.0,
            ),
            width: 2.0,
          ),
          Align(
            alignment: Alignment.centerLeft,
            child: Container(
              margin: EdgeInsets.only(left: 16.0),
              height: 24.0,
              width: 24.0,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: AppColors.primary,
                border: Border.all(
                  color: widget.data.connectionState ==
                          DeviceConnectionState.CONNECTED
                      ? AppColors.secondary
                      : AppColors.textInactive,
                  width: 2.0,
                  style: BorderStyle.solid,
                ),
              ),
              child: Center(
                child: Text(
                  "${widget.data.position}",
                  style: TextStyle(color: _getColorByDeviceState(widget.data)),
                ),
              ),
            ),
          )
        ],
      );

  /// Model and name text widget
  get _modelAndTitle => Expanded(
        child: Container(
          margin: EdgeInsets.only(left: 16.0, right: 8.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(bottom: 2.0),
                child: Text(
                  widget.data.title,
                  style: TextStyle(
                    fontSize: 14.0,
                    color: _getColorByDeviceState(widget.data),
                  ),
                  maxLines: 2,
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 2.0),
                child: Text(
                  widget.data.model,
                  style: TextStyle(
                      fontSize: 12.0,
                      color: widget.data.connectionState ==
                              DeviceConnectionState.CONNECTED
                          ? AppColors.textSubtitleNormal
                          : AppColors.textInactive),
                  maxLines: 2,
                ),
              ),
            ],
          ),
        ),
      );

  /// Connection state widget
  get _connectionState => Container(
        margin: EdgeInsets.only(right: 60.0),
        child: Align(
          alignment: Alignment.centerLeft,
          child: _getIconDataByDeviceState(widget.data),
        ),
      );

  /// Relay state widget
  get _relayState => GestureDetector(
        onTap: () => _updateRelayState(),
        child: Container(
          height: 30.0,
          width: 47.0,
          margin: EdgeInsets.only(right: 20.0),
          child: FlareActor("assets/relay.flr",
//                          animation: "Wait-On",
              controller: controller,
              alignment: Alignment.center,
              fit: BoxFit.contain),
        ),
      );

  _navigateToDeviceEdit(BuildContext context) {
    Navigator.of(context).pushNamed(Routes.DEVICE_EDIT, arguments: widget.data.id);
  }

  _updateRelayState() {
    switch (widget.data.relayState) {
      case RelayState.TURNED_OFF:
        widget.data.relayState = RelayState.TURNING_ON;
        break;
      case RelayState.TURNING_ON:
        widget.data.relayState = RelayState.TURNED_ON;
        break;
      case RelayState.TURNING_OFF:
        widget.data.relayState = RelayState.TURNED_OFF;
        break;
      case RelayState.TURNED_ON:
        widget.data.relayState = RelayState.TURNING_OFF;
        break;
    }
    controller.applyState(widget.data.relayState);
  }
}

/// helper methods
Color _getColorByDeviceState(DeviceModel device) {
  return device.connectionState == DeviceConnectionState.CONNECTED
      ? AppColors.textNormal
      : AppColors.textInactive;
}

Icon _getIconDataByDeviceState(DeviceModel device) {
  switch (device.connectionState) {
    case DeviceConnectionState.CONNECTED:
      return Icon(AppIcons.ic_toolbar_wifi_on,
          color: AppColors.secondary, size: 14.0);
    case DeviceConnectionState.CONNECTING:
      return Icon(AppIcons.ic_toolbar_wifi_on,
          color: AppColors.textInactive, size: 14.0);
    case DeviceConnectionState.NO_CONNECTION:
      return Icon(AppIcons.ic_toolbar_wifi_no_connection,
          color: AppColors.textInactive, size: 14.0);
    default:
      return null;
  }
}