const React = require('react');
const { connect } = require('react-redux');
const { reg } = require('lib/registry.js');
const { bridge } = require('electron').remote.require('./bridge');
const { Header } = require('./Header.min.js');
const { themeStyle } = require('../theme.js');
const { _ } = require('lib/locale.js');
const ClipperServer = require('lib/ClipperServer');
const Setting = require('lib/models/Setting');
class ClipperConfigScreenComponent extends React.Component {
disableClipperServer_click() {
Setting.setValue('clipperServer.autoStart', false);
ClipperServer.instance().stop();
}
enableClipperServer_click() {
Setting.setValue('clipperServer.autoStart', true);
ClipperServer.instance().start();
}
chromeButton_click() {
bridge().openExternal("https://chrome.google.com/webstore/detail/joplin-web-clipper/alofnhikmmkdbbbgpnglcpdollgjjfek")
}
firefoxButton_click() {
bridge().openExternal("https://addons.mozilla.org/en-US/firefox/addon/joplin-web-clipper/");
}
render() {
const style = this.props.style;
const theme = themeStyle(this.props.theme);
const headerStyle = {
width: style.width,
};
const stepBoxStyle = {
border: "1px solid #ccc",
padding: 15,
paddingTop: 0,
marginBottom: 15,
};
let webClipperStatusComps = [];
if (this.props.clipperServerAutoStart) {
webClipperStatusComps.push({_('The web clipper service is enabled and set to auto-start.')}
)
if (this.props.clipperServer.startState === 'started') {
webClipperStatusComps.push({_('Status: Started on port %d', this.props.clipperServer.port)}
)
} else {
webClipperStatusComps.push({_('Status: %s', this.props.clipperServer.startState)}
)
}
webClipperStatusComps.push({_('Disable Web Clipper Service')} )
} else {
webClipperStatusComps.push({_('The web clipper service is not enabled.')}
)
webClipperStatusComps.push({_('Enable Web Clipper Service')} )
}
return (
{_('Joplin Web Clipper allows saving web pages and screenshots from your browser to Joplin.')}
{_('In order to use the web clipper, you need to do the following:')}
{_('Step 1: Enable the clipper service')}
{_('This service allows the browser extension to communicate with Joplin. When enabling it your firewall may ask you to give permission to Joplin to listen to a particular port.')}
{webClipperStatusComps}
{_('Step 2: Install the extension')}
{_('Download and install the relevant extension for your browser:')}
);
}
}
const mapStateToProps = (state) => {
return {
theme: state.settings.theme,
clipperServer: state.clipperServer,
clipperServerAutoStart: state.settings['clipperServer.autoStart'],
};
};
const ClipperConfigScreen = connect(mapStateToProps)(ClipperConfigScreenComponent);
module.exports = { ClipperConfigScreen }; 
