import {
  IconArrowsAnticlockwise, IconArrowsMove, IconBasicGear, IconBasicTrashcan,
  IconSoftwarePaintbrush, Icon,
} from '@bthlabs/homehub-icons';
import {withRango} from '@bthlabs/rango';
import Popup from '@bthlabs/react-custom-popup';
import isNull from 'lodash/isNull';
import React from 'react';

import {Button} from 'src/components';
import {
  AppearancePopup, WidgetSettingsModal, WidgetToolbar,
} from 'src/main/components';

import './DashboardItem.scss';

export const ControlledDashboardItem = (props) => {
  const appearancePopupAnchor = React.useRef(null);
  const rangoSettings = props.settings;

  const [showAppearancePopup, setShowAppearancePopup] = React.useState(false);

  const onAppearancePopupLayout = React.useCallback(
    (layout) => {
      return [layout[0] - 84 + 16, layout[1] + 16];
    },
    []
  );

  const onShowAppearancePopupClick = React.useCallback(
    () => {
      setShowAppearancePopup(true);
    },
    [setShowAppearancePopup]
  );

  const onAppearancePopupHide = React.useCallback(
    () => {
      setShowAppearancePopup(false);
    },
    [setShowAppearancePopup]
  );

  const onAppearancePopupColorChange = React.useCallback(
    (color) => {
      props.onAppearancePopupColorChange(color);
      onAppearancePopupHide();
    },
    [props, onAppearancePopupHide]
  );

  return (
    <div className="DashboardItem">
      {props.children}

      {!rangoSettings.READ_ONLY &&
        <React.Fragment>
          <WidgetToolbar>
            <WidgetToolbar.Item className="draggable-handle">
              <Icon icon={IconArrowsMove} middle size="0.8rem" />
            </WidgetToolbar.Item>
          </WidgetToolbar>

          <WidgetToolbar right>
            {!isNull(props.serviceState) && !props.serviceState.isLoading() &&
              <WidgetToolbar.Item
                _hint="Restart"
                title="Restart widget"
                onClick={props.onServiceRestartButtonClick}
              >
                <Icon icon={IconArrowsAnticlockwise} size="0.7rem" />
              </WidgetToolbar.Item>
            }

            <WidgetToolbar.Item
              _hint="Appearance"
              ref={appearancePopupAnchor}
              title="Appearance"
              onClick={onShowAppearancePopupClick}
            >
              <Icon icon={IconSoftwarePaintbrush} size="0.7rem" />
            </WidgetToolbar.Item>

            {props.hasSettingsView &&
              <WidgetToolbar.Item
                _hint="Settings"
                title="Settings"
                onClick={props.onSettingsButtonClick}
              >
                <Icon icon={IconBasicGear} size="0.8rem" />
              </WidgetToolbar.Item>
            }

            {!props.hasSettingsView &&
              <WidgetToolbar.Item
                _hint="Delete"
                title="Delete"
                onClick={props.onSettingsModalNukeButtonClick}
              >
                <Icon icon={IconBasicTrashcan} size="0.8rem" />
              </WidgetToolbar.Item>
            }
          </WidgetToolbar>

          {props.hasSettingsView &&
            <WidgetSettingsModal
              buttons={[
                <Button
                  key="WidgetSettingsModalNukeButton"
                  className="mr-auto"
                  size="sm"
                  variant="danger"
                  onClick={props.onSettingsModalNukeButtonClick}
                >
                  Delete
                </Button>,
              ]}
              settingsView={props.settingsView}
              settingsViewProps={props.settingsViewProps}
              show={props.showSettingsModal}
              onClose={props.onSettingsModalClose}
              onCancelButtonClick={props.onSettingsModalClose}
              onSaveButtonClick={props.onSettingsModalSaveButtonClick}
            />
          }

          <Popup
            anchor={appearancePopupAnchor}
            visible={showAppearancePopup}
            onLayout={onAppearancePopupLayout}
            onOverlayClick={onAppearancePopupHide}
          >
            <AppearancePopup
              onColorChange={onAppearancePopupColorChange}
            />
          </Popup>
        </React.Fragment>
      }
    </div>
  );
};
ControlledDashboardItem.displayName = 'DashboardItem';

export const DashboardItem = withRango(ControlledDashboardItem);
