'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _class, _temp2;

var _pathExtra = require('path-extra');

var _pathExtra2 = _interopRequireDefault(_pathExtra);

var _fsExtra = require('fs-extra');

var _fsExtra2 = _interopRequireDefault(_fsExtra);

var _electron = require('electron');

var _reactBootstrap = require('react-bootstrap');

var _reactRedux = require('react-redux');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _lodash = require('lodash');

var _folderPicker = require('../components/folder-picker');

var _folderPicker2 = _interopRequireDefault(_folderPicker);

var _tools = require('views/utils/tools');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const { config, toggleModal, i18n, EXROOT } = window;
const { openItem } = _electron.shell;
const __ = i18n.setting.__.bind(i18n.setting);

const toggleModalWithDelay = (...arg) => setTimeout(() => toggleModal(...arg), 1500);

function _ref(e) {
  try {
    const d = _pathExtra2.default.join(EXROOT, 'hack', 'custom.css');
    _fsExtra2.default.ensureFileSync(d);
    return openItem(d);
  } catch (e) {
    return toggleModalWithDelay(__('Edit custom CSS'), __("Failed. Perhaps you don't have permission to it."));
  }
}

function _ref2(e) {
  config.set('poi.vibrant', parseInt(e.target.value));
}

function _ref3(theme, index) {
  return _react2.default.createElement(
    'option',
    { key: index, value: theme },
    theme === '__default__' ? 'Default' : theme[0].toUpperCase() + theme.slice(1)
  );
}

const ThemeConfig = (0, _reactRedux.connect)((state, props) => ({
  themes: (0, _lodash.get)(state, 'ui.themes'),
  theme: (0, _lodash.get)(state.config, 'poi.theme', 'paperdark'),
  enableSVGIcon: (0, _lodash.get)(state.config, 'poi.useSVGIcon', false),
  enableTransition: (0, _lodash.get)(state.config, 'poi.transition.enable', true),
  useGridMenu: (0, _lodash.get)(state.config, 'poi.tabarea.grid', navigator.maxTouchPoints !== 0),
  vibrant: (0, _lodash.get)(state.config, 'poi.vibrant', 0), // 0: disable, 1: macOS vibrant, 2: custom background
  background: (0, _lodash.get)(state.config, 'poi.background')
}))((_temp2 = _class = class ThemeConfig extends _react.Component {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), this.state = {
      show: false
    }, this.handleSetTheme = e => {
      const theme = e.target.value;
      if (this.props.theme !== theme) {
        return window.applyTheme(theme);
      }
    }, this.handleOpenCustomCss = _ref, this.handleSetSVGIcon = () => {
      config.set('poi.useSVGIcon', !this.props.enableSVGIcon);
    }, this.handleSetTransition = () => {
      config.set('poi.transition.enable', !this.props.enableTransition);
    }, this.handleSetGridMenu = () => {
      config.set('poi.tabarea.grid', !this.props.useGridMenu);
    }, this.handleSetVibrancy = _ref2, this.handleMouseEnter = () => {
      this.setState({
        show: true
      });
    }, this.handleMouseLeave = () => {
      this.setState({
        show: false
      });
    }, _temp;
  }

  render() {
    return _react2.default.createElement(
      _reactBootstrap.Grid,
      null,
      _react2.default.createElement(
        _reactBootstrap.Col,
        { xs: 6 },
        _react2.default.createElement(
          _reactBootstrap.FormControl,
          { componentClass: 'select', value: this.props.theme, onChange: this.handleSetTheme },
          this.props.themes.map(_ref3)
        )
      ),
      _react2.default.createElement(
        _reactBootstrap.Col,
        { xs: 6 },
        _react2.default.createElement(
          _reactBootstrap.FormControl,
          { componentClass: 'select', value: this.props.vibrant, onChange: this.handleSetVibrancy },
          _react2.default.createElement(
            'option',
            { key: 0, value: 0 },
            __('Default')
          ),
          ['darwin', 'win32'].includes(process.platform) && _react2.default.createElement(
            'option',
            { key: 1, value: 1 },
            __("Vibrance")
          ),
          _react2.default.createElement(
            'option',
            { key: 2, value: 2 },
            __("Custom background")
          )
        )
      ),
      _react2.default.createElement(
        _reactBootstrap.Col,
        { xs: 6, style: { marginTop: '1ex' } },
        _react2.default.createElement(
          _reactBootstrap.Button,
          { bsStyle: 'primary', onClick: this.handleOpenCustomCss, block: true },
          __('Edit custom CSS')
        )
      ),
      _react2.default.createElement(
        _reactBootstrap.Col,
        { xs: 6, style: { marginTop: '1ex' } },
        _react2.default.createElement(
          _reactBootstrap.Overlay,
          {
            show: this.props.background && this.state.show,
            placement: 'bottom',
            target: this.fileSelect
          },
          _react2.default.createElement(
            _reactBootstrap.Tooltip,
            { id: 'background-preview' },
            _react2.default.createElement(
              'div',
              null,
              _react2.default.createElement('img', { src: encodeURI((0, _tools.fileUrl)(this.props.background)), alt: '', style: { maxHeight: '100%', maxWidth: '100%' } })
            )
          )
        ),
        _react2.default.createElement(
          'div',
          {
            ref: ref => this.fileSelect = ref,
            onMouseEnter: this.handleMouseEnter,
            onMouseLeave: this.handleMouseLeave
          },
          this.props.vibrant === 2 && _react2.default.createElement(_folderPicker2.default, {
            label: __('Custom background'),
            configName: 'poi.background',
            defaultVal: '',
            isFolder: false,
            placeholder: __('No background image selected')
          })
        )
      ),
      _react2.default.createElement(
        _reactBootstrap.Col,
        { xs: 12 },
        _react2.default.createElement(
          _reactBootstrap.Checkbox,
          { checked: this.props.enableSVGIcon, onChange: this.handleSetSVGIcon },
          __('Use SVG Icon')
        )
      ),
      _react2.default.createElement(
        _reactBootstrap.Col,
        { xs: 12 },
        _react2.default.createElement(
          _reactBootstrap.Checkbox,
          { checked: this.props.enableTransition, onChange: this.handleSetTransition },
          __('Enable Smooth Transition')
        )
      ),
      _react2.default.createElement(
        _reactBootstrap.Col,
        { xs: 12 },
        _react2.default.createElement(
          _reactBootstrap.Checkbox,
          { checked: this.props.useGridMenu, onChange: this.handleSetGridMenu },
          __('Use Gridded Plugin Menu')
        )
      )
    );
  }
}, _class.propTypes = {
  themes: _propTypes2.default.arrayOf(_propTypes2.default.string),
  theme: _propTypes2.default.string,
  enableSVGIcon: _propTypes2.default.bool,
  enableTransition: _propTypes2.default.bool,
  useGridMenu: _propTypes2.default.bool,
  vibrant: _propTypes2.default.number,
  background: _propTypes2.default.string
}, _temp2));

exports.default = ThemeConfig;
module.exports = exports['default'];