import {Widget} from '@bthlabs/homehub-components';
import {IconBasicClock} from '@bthlabs/homehub-icons';
import {DateTime} from 'luxon';
import {Form} from 'react-bootstrap';
import React from 'react';

import './TimeWidgetView.scss';

const TIME_FORMATS = ['hh:mm a', 'HH:mm'];
const DATE_FORMATS = ['DATE_HUGE', 'DATE_FULL', 'DATE_MED'];
const REF_DATETIME = DateTime.fromISO(
  '2020-06-25T13:15:00', {zone: 'Europe/Warsaw'}
);

export const TimeWidgetSettingsView = (props) => {
  const onLocaleInputChange = React.useCallback(
    (event) => {
      props.setNextCharacteristics({
        ...props.nextCharacteristics,
        locale: event.target.value,
      });
    },
    [props]
  );

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

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

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

  let refDateTime = REF_DATETIME;
  if (props.nextCharacteristics.locale) {
    refDateTime = refDateTime.setLocale(props.nextCharacteristics.locale);
  }

  return (
    <Form>
      <Form.Group controlId="input-locale">
        <Form.Label>Locale</Form.Label>
        <Form.Control
          as="select"
          size="sm"
          value={props.nextCharacteristics.locale}
          onChange={onLocaleInputChange}
        >
          <option value="">System Default</option>
          {Object.keys(props.settings.LOCALES).map((locale) => {
            return (
              <option key={locale} value={locale}>
                {props.settings.LOCALES[locale]}
              </option>
            );
          })}
        </Form.Control>
      </Form.Group>

      <Form.Group controlId="input-timeFormat">
        <Form.Label>Time Format</Form.Label>
        <Form.Control
          as="select"
          size="sm"
          value={props.nextCharacteristics.timeFormat}
          onChange={onTimeFormatInputChange}
        >
          <option value="">
            Locale Default
            {' '}
            ({refDateTime.toLocaleString(DateTime.TIME_SIMPLE)})
          </option>
          {TIME_FORMATS.map((timeFormat) => {
            return (
              <option key={timeFormat} value={timeFormat}>
                {refDateTime.toFormat(timeFormat)}
              </option>
            );
          })}
        </Form.Control>
      </Form.Group>

      <Form.Group controlId="input-timeFormat">
        <Form.Label>Date Format</Form.Label>
        <Form.Control
          as="select"
          size="sm"
          value={props.nextCharacteristics.dateFormat}
          onChange={onDateFormatInputChange}
        >
          {DATE_FORMATS.map((dateFormat) => {
            return (
              <option key={dateFormat} value={dateFormat}>
                {refDateTime.toLocaleString(DateTime[dateFormat])}
              </option>
            );
          })}
        </Form.Control>
      </Form.Group>
    </Form>
  );
};

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

  const timeParts = props.serviceState.data().time.split(':');
  return (
    <Widget
      appearance={props.appearance}
      className="TimeWidgetView"
      instance={props.service.instance}
      kind={props.service.kind}
      layout={props.service.layout}
    >
      <h4 className="text-center">
        {timeParts.map((timePart, index) => {
          return (
            <React.Fragment key={`timePart-${index}`}>
              {index > 0 &&
                <span className="time-sep">:</span>
              }
              <span>{timePart}</span>
            </React.Fragment>
          );
        })}
      </h4>
      <h6 className="text-center">{props.serviceState.data().date}</h6>
    </Widget>
  );
};

TimeWidgetView.defaultLayout = {
  h: 3,
  w: 12,
};
TimeWidgetView.icon = IconBasicClock;
TimeWidgetView.layoutConstraints = {
  minH: 3,
  minW: 4,
};
TimeWidgetView.settingsView = TimeWidgetSettingsView;
TimeWidgetView.title = 'Time';

export default TimeWidgetView;
