class properties

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import PageNumberingColorPicker from 'components/generic/pageNumberingColorPicker/PageNumberingColorPicker';
import { showInformationModal } from 'actions/commonActions';
import { closeColorPickerModal, updatePageNumberingSettings } from 'actions/editorActions';

import { getColorPickerModalType } from 'selectors/editorSelectors';
import { getSelectedColorsPaletteWithPrimary } from 'selectors/editorToolbarSelectors';
import { getLeftNumberingColor, getRightNumberingColor } from 'selectors/spreadSettingsSelectors';

import { findColorInPalettesByRGB } from 'utils/palettes/findColorInPalettes';
import keysCodes from 'constants/keysCodes';
import FontColorPickerTypes from 'constants/fontColorPickerTypes';

import './ColorPickerModalDialog.less';

class ColorPickerModalDialog extends React.Component {

  state = {
    selectedColor: this.getSelectedColor()
  };

  componentDidMount() {
    this.onKeyDownListener = this.handleKeyDown;
    document.addEventListener('keydown', this.onKeyDownListener);
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.onKeyDownListener);
    this.onKeyDownListener = null;
  }

  getSelectedColor = () => {
    switch (this.props.colorPickerModalType) {
      case FontColorPickerTypes.LEFT_FONT_COLOR: {
        return this.props.leftNumberingColor.get('rgb');
      }
      case FontColorPickerTypes.RIGHT_FONT_COLOR: {
        return this.props.rightNumberingColor.get('rgb');
      }
    }
  };

  handleKeyDown = (event) => {
    if (event.keyCode === keysCodes.escape) {
      this.onClose();
    }
  };

  setFontColor = (selectedColor) => {
    this.setState({ selectedColor });
  };

  onClose = () => {
    this.props.closeColorPickerModal();
  };

  onSave(colorChanged, selectedColor, palette, colorPickerModalType) {
    if (colorChanged) {
      const colorId = findColorInPalettesByRGB(selectedColor, palette).get('id');
      this.props.updatePageNumberingSettings({key: colorPickerModalType, value: colorId});
      this.onClose();
    }
  }

  render() {
    const { selectedColor } = this.state;
    const { palette, colorPickerModalType } = this.props;
    const colorChanged = selectedColor !== this.getSelectedColor();

    return (
      <div className='color-picker-modal-dialog' id='color-picker-modal-dialog'>
        <div className='color-picker-modal-dialog__container'>
          <div className='modal-content'>
            <PageNumberingColorPicker
              selectedColor={selectedColor}
              onSelectColor={this.setFontColor}
              onSave={this.onSave.bind(this, colorChanged, selectedColor, palette, colorPickerModalType)}
              onClose={this.onClose}
              palette={palette}
              disabled={!colorChanged}
            />
          </div>
        </div>
      </div>
    );
  }
}

ColorPickerModalDialog.propTypes = {
  palette: PropTypes.object.isRequired,
  colorPickerModalType: PropTypes.string.isRequired,
  leftNumberingColor: PropTypes.object.isRequired,
  rightNumberingColor: PropTypes.object.isRequired,
  showInformationModal: PropTypes.func.isRequired,
  closeColorPickerModal: PropTypes.func.isRequired,
  updatePageNumberingSettings: PropTypes.func.isRequired
};

const mapStateToProps = (appState) => ({
  palette: getSelectedColorsPaletteWithPrimary(appState),
  colorPickerModalType: getColorPickerModalType(appState),
  leftNumberingColor: getLeftNumberingColor(appState),
  rightNumberingColor: getRightNumberingColor(appState)
});

const mapActionsToProps = {
  showInformationModal,
  closeColorPickerModal,
  updatePageNumberingSettings
};

export default connect(
  mapStateToProps,
  mapActionsToProps
)(ColorPickerModalDialog);