import React from 'react';
import ReactDOM from 'react-dom';
import fs from 'fs-plus';
import path from 'path';
import {EventedIFrame} from 'nylas-component-kit';
import LessCompileCache from '../../../src/less-compile-cache'
class ThemeOption extends React.Component {
static propTypes = {
theme: React.PropTypes.object.isRequired,
active: React.PropTypes.bool.isRequired,
onSelect: React.PropTypes.func.isRequired,
}
constructor(props) {
super(props);
this.lessCache = null;
}
componentDidMount() {
this._writeContent();
}
_getImportPaths() {
return [
this.props.theme.getStylesheetsPath(),
NylasEnv.themes.getBaseTheme().getStylesheetsPath(),
];
}
_loadStylesheet(stylesheetPath) {
if (path.extname(stylesheetPath) === '.less') {
return this._loadLessStylesheet(stylesheetPath);
}
return fs.readFileSync(stylesheetPath, 'utf8');
}
_loadLessStylesheet(lessStylesheetPath) {
const {configDirPath, resourcePath} = NylasEnv.getLoadSettings();
if (this.lessCache) {
this.lessCache.setImportPaths(this._getImportPaths());
} else {
const importPaths = this._getImportPaths();
this.lessCache = new LessCompileCache({configDirPath, resourcePath, importPaths});
}
const themeVarPath = path.relative(`${resourcePath}/internal_packages/theme-picker/preview-styles`,
this.props.theme.getStylesheetsPath());
let varImports = `@import "../../../static/variables/ui-variables";`
if (fs.existsSync(`${this.props.theme.getStylesheetsPath()}/ui-variables.less`)) {
varImports += `@import "${themeVarPath}/ui-variables";`
}
if (fs.existsSync(`${this.props.theme.getStylesheetsPath()}/theme-colors.less`)) {
varImports += `@import "${themeVarPath}/theme-colors";`
}
const less = fs.readFileSync(lessStylesheetPath, 'utf8');
return this.lessCache.cssForFile(lessStylesheetPath, [varImports, less].join('\n'));
}
_writeContent() {
const doc = ReactDOM.findDOMNode(this._iframeComponent).contentDocument;
if (!doc) return;
const {resourcePath} = NylasEnv.getLoadSettings();
const css = ``
const html = `
${css}
${this.props.theme.displayName}
`
doc.open();
doc.write(html);
doc.close();
}
render() {
return (
{ this._iframeComponent = cm; }}
className={`theme-preview-${this.props.theme.name.replace(/\./g, '-')}`}
frameBorder="0"
width="115px"
height="70px"
/>
);
}
}
export default ThemeOption;