import {
  useAddDashboard, useAddService, useCurrentDashboardId, useDashboards,
  useServicesSavingState, useSetCurrentDashboardId, useWebSocketState,
} from '@bthlabs/homehub-core';
import {withRango} from '@bthlabs/rango';
import React from 'react';

import {
  AddDashboardModal, Taskbar, WidgetSettingsModal,
} from 'src/main/components';

export const ControlledTaskbarContainer = (props) => {
  const addService = useAddService();
  const savingState = useServicesSavingState();
  const webSocketState = useWebSocketState();
  const services = props.settings.SERVICES;
  const widgets = props.settings.WIDGETS;
  const currentDashboardId = useCurrentDashboardId();
  const dashboards = useDashboards();
  const setCurrentDashboardId = useSetCurrentDashboardId();
  const addDashboard = useAddDashboard();

  const [addedServiceKey, setAddedServiceKey] = React.useState(null);
  const [characteristics, setCharacteristics] = React.useState(null);
  const [addDashboardModalVisible, setAddDashboardModalVisible] = React.useState(false);

  let ServiceObject = null;
  let WidgetComponent = null;
  if (addedServiceKey) {
    ServiceObject = services[addedServiceKey];
    WidgetComponent = widgets[ServiceObject.widget];
  }

  const onTaskbarAddService = React.useCallback(
    (key) => {
      setAddedServiceKey(key);
    },
    [setAddedServiceKey]
  );

  React.useEffect(
    () => {
      if (ServiceObject) {
        if (WidgetComponent.settingsView) {
          setCharacteristics(ServiceObject.emptyCharacteristics());
        } else {
          addService(addedServiceKey, ServiceObject.emptyCharacteristics());
          setAddedServiceKey(null);
        }
      } else {
        setAddedServiceKey(null);
        setCharacteristics(null);
      }
    },
    [addedServiceKey, addService, ServiceObject, WidgetComponent]
  );

  let settingsView = null;
  let settingsViewProps = {};
  if (WidgetComponent) {
    settingsView = WidgetComponent.settingsView || null;
    settingsViewProps.nextCharacteristics = characteristics;
    settingsViewProps.settings = props.settings;
    settingsViewProps.setNextCharacteristics = setCharacteristics;
  }

  const onAddWidgetModalClose = React.useCallback(
    () => {
      setAddedServiceKey(null);
    },
    [setAddedServiceKey]
  );

  const onAddWidgetModalSaveButtonClick = React.useCallback(
    () => {
      addService(addedServiceKey, characteristics);
      setAddedServiceKey(null);
    },
    [addService, addedServiceKey, characteristics]
  );

  const onTaskbardAddDashboard = React.useCallback(
    () => {
      setAddDashboardModalVisible(true);
    },
    [setAddDashboardModalVisible]
  );

  const onTaskbarSelectDashboard = React.useCallback(
    (dashboardId) => {
      setCurrentDashboardId(dashboardId);
    },
    [setCurrentDashboardId]
  );

  const onAddDashboardModalClose = React.useCallback(
    () => {
      setAddDashboardModalVisible(false);
    },
    [setAddDashboardModalVisible]
  );

  const onAddDashboardModalSave = React.useCallback(
    (name) => {
      addDashboard(name);
    },
    [addDashboard]
  );

  return (
    <React.Fragment>
      <Taskbar
        currentDashboardId={currentDashboardId}
        dashboards={dashboards}
        offlineMode={props.settings.OFFLINE_MODE}
        savingState={savingState}
        services={services}
        webSocketState={webSocketState}
        widgets={widgets}
        onAddDashboard={onTaskbardAddDashboard}
        onAddService={onTaskbarAddService}
        onSelectDashboard={onTaskbarSelectDashboard}
      />

      <WidgetSettingsModal
        settingsView={settingsView}
        settingsViewProps={settingsViewProps}
        show={true}
        onClose={onAddWidgetModalClose}
        onCancelButtonClick={onAddWidgetModalClose}
        onSaveButtonClick={onAddWidgetModalSaveButtonClick}
      />

      <AddDashboardModal
        show={addDashboardModalVisible}
        onClose={onAddDashboardModalClose}
        onSave={onAddDashboardModalSave}
      />
    </React.Fragment>
  );
};
ControlledTaskbarContainer.displayName = 'TaskbarContainer';

export const TaskbarContainer = withRango(ControlledTaskbarContainer);
