import {
  IconArrowsCircleCheck, IconArrowsExclamation, IconArrowsRotate,
  IconBasicElaborationCloudCheck, IconBasicElaborationCloudNoaccess, Icon,
} from '@bthlabs/homehub-icons';
import ClassName from 'classnames';
import React from 'react';

import {StartMenu} from './StartMenu';

import './Taskbar.scss';

export const Taskbar = (props) => {
  const hasSavingError = (
    !props.savingState.isSaving && props.savingState.lastSaveError !== null
  );

  const onDashboardButtonClick = React.useCallback(
    (event) => {
      props.onSelectDashboard(event.currentTarget.dataset.dashboard);
    },
    [props]
  );

  const hasDashboards = React.useMemo(
    () => {
      return props.dashboards.length > 0;
    },
    [props]
  );

  return (
    <div className="Taskbar">
      <StartMenu
        hasDashboards={hasDashboards}
        offlineMode={props.offlineMode}
        services={props.services}
        widgets={props.widgets}
        onAddDashboard={props.onAddDashboard}
        onAddService={props.onAddService}
      />

      {props.dashboards.map((dashboard) => {
        const className = ClassName('dashboard-btn', {
          active: dashboard.id === props.currentDashboardId,
        });

        return (
          <a
            _hint="Dashboard"
            key={dashboard.id}
            className={className}
            data-dashboard={dashboard.id}
            onClick={onDashboardButtonClick}
          >
            {dashboard.name}
          </a>
        );
      })}

      <div className="systray ml-auto">
        {(props.offlineMode === false) &&
          <div className="systray-item">
            {props.webSocketState.isWebSocketConnected &&
              <Icon
                _hint="WebSocketConnected"
                className="text-success"
                icon={IconBasicElaborationCloudCheck}
                size="1.2rem"
                title="Backend connection up"
              />
            }

            {!props.webSocketState.isWebSocketConnected &&
              <Icon
                _hint="WebSocketNotConnected"
                className="text-danger"
                icon={IconBasicElaborationCloudNoaccess}
                size="1.2rem"
                title="Backend connection down"
              />
            }
          </div>
        }

        <div className="systray-item">
          {props.savingState.isSaving &&
            <Icon
              _hint="IsSaving"
              className="animation-loading"
              icon={IconArrowsRotate}
              size="1.2rem"
            />
          }

          {!props.savingState.isSaving && hasSavingError &&
            <Icon
              _hint="SaveError"
              className="text-danger"
              icon={IconArrowsExclamation}
              size="1.2rem"
              title={`Last save error: ${props.savingState.lastSaveError}`}
            />
          }

          {!props.savingState.isSaving && !hasSavingError && props.savingState.lastSaveTimestamp &&
            <Icon
              _hint="SaveOK"
              className="text-success"
              icon={IconArrowsCircleCheck}
              size="1.2rem"
              title="All changes saved"
            />
          }
        </div>
      </div>
    </div>
  );
};
