import {FatalError, Widget} from '@bthlabs/homehub-components';
import {
  IconArrowsRotate, IconBasicElaborationTabletCloud, Icon,
} from '@bthlabs/homehub-icons';
import ClassName from 'classnames';
import {DateTime} from 'luxon';
import React from 'react';
import {Form} from 'react-bootstrap';

import './IFormicariumWidgetView.scss';

export const IFormicariumWidgetSettingsView = (props) => {
  const onMQTTInputChange = React.useCallback(
    (event) => {
      props.setNextCharacteristics({
        ...props.nextCharacteristics,
        mqtt: event.target.value,
      });
    },
    [props]
  );

  const onNameInputChange = React.useCallback(
    (event) => {
      props.setNextCharacteristics({
        ...props.nextCharacteristics,
        name: event.target.value,
      });
    },
    [props]
  );

  const onTopicInputChange = React.useCallback(
    (event) => {
      props.setNextCharacteristics({
        ...props.nextCharacteristics,
        topic: event.target.value,
      });
    },
    [props]
  );

  if (!props.nextCharacteristics) {
    return null;
  }

  return (
    <Form>
      <Form.Group controlId="input-mqtt">
        <Form.Label>MQTT Host</Form.Label>
        <Form.Control
          size="sm"
          value={props.nextCharacteristics.mqtt}
          onChange={onMQTTInputChange}
        />
      </Form.Group>

      <Form.Group controlId="input-name">
        <Form.Label>Instance Name</Form.Label>
        <Form.Control
          size="sm"
          value={props.nextCharacteristics.name}
          onChange={onNameInputChange}
        />
      </Form.Group>

      <Form.Group controlId="input-topic">
        <Form.Label>MQTT Topic</Form.Label>
        <Form.Control
          size="sm"
          value={props.nextCharacteristics.topic}
          onChange={onTopicInputChange}
        />
      </Form.Group>
    </Form>
  );
};

export const IFormicariumWidgetView = (props) => {
  if (props.serviceState === null) {
    return null;
  }

  let data = null;
  let lastUpdateDt = null;
  if (props.serviceState.hasData()) {
    data = props.serviceState.data();
    lastUpdateDt = DateTime.fromSeconds(data.dt);
  }

  const className = ClassName('IFormicariumWidgetView', {
    'is-loading': (
      props.serviceState.isLoading() || props.serviceState.hasFatalError()
    ),
  });

  return (
    <Widget className={className} {...props}>
      {props.serviceState.isLoading() &&
        <Icon
          _hint="Loader"
          className="animation-loading loader"
          icon={IconArrowsRotate}
          size={78}
        />
      }
      {props.serviceState.hasData() &&
        <div _hint="InstanceInfo">
          <h5 _hint="InstanceName" className="text-center">
            {data.name}
          </h5>
          <div _hint="InstanceMetrics" className="metrics">
            {Object.values(data.dht).map((metric) => {
              return (
                <div
                  _hint="InstanceDHTMetric"
                  key={`dht-${metric.name}`}
                  className="metric"
                >
                  <p>{metric.name}</p>
                  <p>Temp: {metric.temp}&deg;</p>
                  <p>Humi: {metric.humi}%</p>
                </div>
              );
            })}
            <div _hint="InstanceFanMetric" className="metric">
              <p>Fan</p>
              <p>{data.fan * 25}%</p>
            </div>
          </div>
          <p className="meta">
            <small _hint="LastUpdate">
              Last update {lastUpdateDt.toLocaleString(DateTime.TIME_SIMPLE)}
            </small>
          </p>
        </div>
      }
      {props.serviceState.hasFatalError() &&
        <FatalError
          service={props.service}
          serviceState={props.serviceState}
        />
      }
    </Widget>
  );
};

IFormicariumWidgetView.defaultLayout = {
  h: 4,
  w: 6,
};
IFormicariumWidgetView.icon = IconBasicElaborationTabletCloud;
IFormicariumWidgetView.layoutConstraints = {
  minH: 4,
  minW: 6,
};
IFormicariumWidgetView.settingsView = IFormicariumWidgetSettingsView;
IFormicariumWidgetView.title = 'iFormicarium';
