import {FatalError, Widget} from '@bthlabs/homehub-components';
import {
  IconArrowsRotate, IconWeatherCloud, IconWeatherDownpourHalfmoon,
  IconWeatherDownpourSun, IconWeatherFog, IconWeatherMoon, IconWeatherRain,
  IconWeatherSnow, IconWeatherStorm, IconWeatherSun,
  IconWeatherVariableHalfmoon, IconWeatherVariableSun, Icon,
} from '@bthlabs/homehub-icons';
import {DateTime} from 'luxon';
import React from 'react';
import {Form} from 'react-bootstrap';

import './WeatherWidgetView.scss';

const ICON_CODE_TO_ICON = {
  '01d': IconWeatherSun,
  '01n': IconWeatherMoon,
  '02d': IconWeatherVariableSun,
  '02n': IconWeatherVariableHalfmoon,
  '03d': IconWeatherCloud,
  '03n': IconWeatherCloud,
  '04d': IconWeatherCloud,
  '04n': IconWeatherCloud,
  '09d': IconWeatherRain,
  '09n': IconWeatherRain,
  '10d': IconWeatherDownpourSun,
  '10n': IconWeatherDownpourHalfmoon,
  '11d': IconWeatherStorm,
  '11n': IconWeatherStorm,
  '13d': IconWeatherSnow,
  '13n': IconWeatherSnow,
  '50d': IconWeatherFog,
  '50n': IconWeatherFog,
};

export const WeatherWidgetSettingsView = (props) => {
  const onCityInputChange = React.useCallback(
    (event) => {
      props.setNextCharacteristics({
        ...props.nextCharacteristics,
        city: event.target.value,
      });
    },
    [props]
  );

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

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

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

  return (
    <Form>
      <Form.Group controlId="input-city">
        <Form.Label>City</Form.Label>
        <Form.Control
          size="sm"
          value={props.nextCharacteristics.city}
          onChange={onCityInputChange}
        />
      </Form.Group>

      <Form.Group controlId="input-units">
        <Form.Label>Units</Form.Label>
        <Form.Control
          as="select"
          size="sm"
          value={props.nextCharacteristics.units}
          onChange={onUnitsInputChange}
        >
          <option value="metric">Metric</option>
          <option value="imperial">Imperial</option>
        </Form.Control>
      </Form.Group>

      {props.nextCharacteristics.apiKey !== undefined &&
        <Form.Group controlId="input-apiKey">
          <Form.Label>API key</Form.Label>
          <Form.Control
            size="sm"
            value={props.nextCharacteristics.apiKey}
            onChange={onAPIKeyInputChange}
          />
        </Form.Group>
      }
    </Form>
  );
};

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

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

  return (
    <Widget
      appearance={props.appearance}
      className="WeatherWidgetView"
      instance={props.service.instance}
      kind={props.service.kind}
      layout={props.service.layout}
    >
      {props.serviceState.isLoading() &&
        <Icon
          _hint="Loader"
          className="animation-loading mx-auto loader"
          icon={IconArrowsRotate}
          size={100}
        />
      }
      {props.serviceState.hasData() &&
        <React.Fragment>
          <div _hint="WeatherInfo" className="weather">
            <Icon
              _hint="WeatherIcon"
              className="icon"
              icon={ICON_CODE_TO_ICON[weather.weather[0].icon]}
              size={100}
            />
            <div className="description">
              <h5 _hint="WeatherName">{weather.name}</h5>
              <h6 _hint="WeatherDescription">
                {weather.weather[0].description}
              </h6>
            </div>
            <div className="temp">
              <h5 _hint="WeatherTemp" className="text-center">
                {Math.round(weather.main.temp)}&deg;
              </h5>
              <h6 _hint="WeatherTempRange" className="text-center">
                <small>{Math.round(weather.main.temp_min)}&deg;</small>
                {' / '}
                <small>{Math.round(weather.main.temp_max)}&deg;</small>
              </h6>
            </div>
          </div>
          <p className="meta">
            <small _hint="LastUpdate">
              Last update {lastUpdateDt.toLocaleString(DateTime.TIME_SIMPLE)}
            </small>
          </p>
        </React.Fragment>
      }
      {props.serviceState.hasFatalError() &&
        <FatalError
          service={props.service}
          serviceState={props.serviceState}
        />
      }
    </Widget>
  );
};

WeatherWidgetView.defaultLayout = {
  h: 6,
  w: 6,
};
WeatherWidgetView.icon = IconWeatherSun;
WeatherWidgetView.layoutConstraints = {
  minH: 6,
  minW: 6,
};
WeatherWidgetView.settingsView = WeatherWidgetSettingsView;
WeatherWidgetView.title = 'Weather';

export default WeatherWidgetView;
