import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import Tooltip from 'react-tooltip';

import Window from './Components/Window';
import WindowButtons from './Components/WindowButtons';
import WindowButton from './Components/WindowButton';
import WindowContent from './Components/WindowContent';
import Titlebar from './Components/Titlebar';
import Tabs from './Components/Tabs';
import { TabContainer, Tab, TabIcon, TabTitle, TabCloseButton } from './Components/Tab';
import TabButton from './Components/TabButton';
import TabContent from './Components/TabContent';
import Toolbar from './Components/Toolbar';
import ToolbarButton from './Components/ToolbarButton';
import ToolbarDivider from './Components/ToolbarDivider';
import { ToolbarTextBoxWrapper, ToolbarTextBox } from './Components/ToolbarTextBox';
import ContentWrapper from './Components/ContentWrapper';

import WindowMinimizeIcon from './Resources/windows/minimize.svg';
import WindowMaximizeIcon from './Resources/windows/maximize.svg';
import WindowCloseIcon from './Resources/windows/close.svg';

import DarkBackIcon from './Resources/dark/arrow_back.svg';
import DarkForwardIcon from './Resources/dark/arrow_forward.svg';
import LightBackIcon from './Resources/light/arrow_back.svg';
import LightForwardIcon from './Resources/light/arrow_forward.svg';

import BackInActiveIcon from './Resources/arrow_back_inactive.svg';
import ForwardInActiveIcon from './Resources/arrow_forward_inactive.svg';

import DarkReloadIcon from './Resources/dark/reload.svg';
import DarkHomeIcon from './Resources/dark/home.svg';
import LightReloadIcon from './Resources/light/reload.svg';
import LightHomeIcon from './Resources/light/home.svg';

import DarkInfomationIcon from './Resources/dark/info.svg';
import LightInfomationIcon from './Resources/light/info.svg';

import DarkStarIcon from './Resources/dark/star.svg';
import DarkStarFilledIcon from './Resources/dark/star-filled.svg';
import LightStarIcon from './Resources/light/star.svg';
import LightStarFilledIcon from './Resources/light/star-filled.svg';

import FeedbackIcon from './Resources/feedback.svg';
import DarkAccountIcon from './Resources/dark/account.svg';
import LightAccountIcon from './Resources/light/account.svg';

import DarkShieldIcon from './Resources/dark/shield.svg';
import LightShieldIcon from './Resources/light/shield.svg';

import DarkMoreIcon from './Resources/dark/more.svg';
import LightMoreIcon from './Resources/light/more.svg';

import DarkPublicIcon from './Resources/dark/public.svg';
import LightPublicIcon from './Resources/light/public.svg';

import DarkAddIcon from './Resources/dark/add.svg';
import DarkCloseIcon from './Resources/dark/close.svg';
import LightAddIcon from './Resources/light/add.svg';
import LightCloseIcon from './Resources/light/close.svg';

import isURL from './Utils/isURL';

const protocolStr = 'flast';

const { remote, ipcRenderer, shell } = window.require('electron');
const { app, systemPreferences, Menu, MenuItem, dialog } = remote;

const platform = window.require('electron-platform');
const path = window.require('path');
const process = window.require('process');

const Config = window.require('electron-store');
const config = new Config();

class BrowserView extends Component {
	constructor(props) {
		super(props);
		this.state = {
			barText: '',
			findText: '',
			previousText: '',
			resultString: '',
			activeMatch: 0,
			isLoading: false,
			canGoBack: false,
			canGoForward: false,
			isBookmarked: false,
			isShowing: true,
		};
	}

	componentDidMount() {
		/*
		let webView = this.refs.webView;
		let props = this.props;

		webView.addEventListener('did-finish-load', (e) => {
			document.title = webView.getTitle();
			this.setText(webView.getURL());
			this.props.updateTab(webView.getTitle(), PublicIcon, webView.getURL(), this.props.index);
			this.setState({ barText: webView.getURL() });
		}, false);

		webView.addEventListener('page-title-updated', (e) => {
			document.title = webView.getTitle();
			this.setText(webView.getURL());
			this.props.updateTab(webView.getTitle(), PublicIcon, webView.getURL(), this.props.index);
			this.setState({ barText: webView.getURL() });
		}, false);

		webView.addEventListener('page-favicon-updated', (e) => {
			if (e.favicons.length > 0) {
				this.props.updateTab(webView.getTitle(), e.favicons[0], webView.getURL(), this.props.index);
			} else {
				this.props.updateTab(webView.getTitle(), PublicIcon, webView.getURL(), this.props.index);
			}
		});

		webView.addEventListener('load-commit', (e) => {
			if (e.isMainFrame) {
				document.title = webView.getTitle();
				this.setText(webView.getURL());
				this.props.updateTab(webView.getTitle(), PublicIcon, webView.getURL(), this.props.index);
				this.setState({ barText: webView.getURL() });
			}
		});

		webView.addEventListener('found-in-page', (e, result) => {
			if (result.activeMatchOrdinal) {
				this.setState({
					activeMatch: result.activeMatchOrdinal,
					resultString: `${this.state.activeMatch}/${result.matches}`
				});
			}

			if (result.finalUpdate) {
				this.setState({ resultString: `${this.state.activeMatch}/${result.matches}` });
			}
		});

		webView.addEventListener('new-window', (e, url) => {
			this.props.addTab('新しいタブ', '', e.url);
		});
		*/

		ipcRenderer.on(`browserview-start-loading-${this.props.windowId}`, (e, args) => {
			if (args.id == this.props.index) {
				this.setState({ isLoading: true });
			}
		});

		ipcRenderer.on(`browserview-stop-loading-${this.props.windowId}`, (e, args) => {
			if (args.id == this.props.index) {
				this.setState({ isLoading: false });
			}
		});

		ipcRenderer.on(`browserview-load-${this.props.windowId}`, (e, args) => {
			if (args.id == this.props.index) {
				this.props.updateTab();
				this.setState({ isBookmarked: args.isBookmarked });
				this.setText(args.url);
			}
		});

		ipcRenderer.on(`update-navigation-state-${this.props.windowId}`, (e, args) => {
			if (args.id == this.props.index) {
				this.setState({ canGoBack: args.canGoBack, canGoForward: args.canGoForward });
			}
		});

		// console.log(webView);
	}

	handleKeyDown = (e) => {
		if (e.key != 'Enter' || this.state.barText.length == 0 || this.state.barText == '') return;

		if (isURL(this.state.barText) && !this.state.barText.includes('://')) {
			ipcRenderer.send(`browserview-loadURL-${this.props.windowId}`, { id: this.props.index, url: `http://${this.state.barText}` });
		} else if (!this.state.barText.includes('://')) {
			ipcRenderer.send(`browserview-loadURL-${this.props.windowId}`, { id: this.props.index, url: this.getSearchEngine().url.replace('%s', this.state.barText) });
		} else {
			const pattern = /^(file:\/\/\S.*)\S*$/;

			if (pattern.test(this.state.barText)) {
				ipcRenderer.send(`browserview-loadFile-${this.props.windowId}`, { id: this.props.index, url: this.state.barText.replace('file://', '') });
			} else {
				ipcRenderer.send(`browserview-loadURL-${this.props.windowId}`, { id: this.props.index, url: this.state.barText });
			}
		}
	}

	handleContextMenu = (e) => {
		const menu = Menu.buildFromTemplate([
			{
				label: '元に戻す',
				accelerator: 'CmdOrCtrl+Z',
				role: 'undo'
			},
			{
				label: 'やり直す',
				accelerator: 'CmdOrCtrl+Y',
				role: 'redo'
			},
			{ type: 'separator' },
			{
				label: '切り取り',
				accelerator: 'CmdOrCtrl+X',
				role: 'cut'
			},
			{
				label: 'コピー',
				accelerator: 'CmdOrCtrl+C',
				role: 'copy'
			},
			{
				label: '貼り付け',
				accelerator: 'CmdOrCtrl+V',
				role: 'paste'
			},
			{ type: 'separator' },
			{
				label: 'すべて選択',
				accelerator: 'CmdOrCtrl+A',
				role: 'selectAll'
			}
		]);
		menu.popup();
	}

	getSearchEngine = () => {
		for (var i = 0; i < config.get('homePage.searchEngines').length; i++) {
			if (config.get('homePage.searchEngines')[i].name == config.get('homePage.defaultEngine')) {
				return config.get('homePage.searchEngines')[i];
			}
		}
	}

	setText = (text) => {
		this.setState({ barText: text });
	}

	goBack = () => {
		ipcRenderer.send(`browserview-goBack-${this.props.windowId}`, { id: this.props.index });
	}

	goForward = () => {
		ipcRenderer.send(`browserview-goForward-${this.props.windowId}`, { id: this.props.index });
	}

	reload = () => {
		if (!this.state.isLoading) {
			ipcRenderer.send(`browserview-reload-${this.props.windowId}`, { id: this.props.index });
		} else {
			ipcRenderer.send(`browserview-stop-${this.props.windowId}`, { id: this.props.index });
		}
	}

	goHome = () => {
		ipcRenderer.send(`browserview-goHome-${this.props.windowId}`, { id: this.props.index });
	}

	bookMark = () => {
		const node = findDOMNode(this.refs.markTooltip);
		Tooltip.show(node);
		setTimeout(() => {
			Tooltip.hide(node);
		}, 1250);
		if (this.state.isBookmarked)
			ipcRenderer.send(`data-bookmark-remove-${this.props.windowId}`, { id: this.props.index, isPrivate: this.props.windowId.startsWith('private') });
		else
			ipcRenderer.send(`data-bookmark-add-${this.props.windowId}`, { id: this.props.index, isPrivate: this.props.windowId.startsWith('private') });
	}

	userMenu = async () => {
		const menu = Menu.buildFromTemplate([
			{
				label: (!this.props.windowId.startsWith('private') ? `${process.env.USERNAME} でログイン中` : 'プライベートモード'),
				enabled: false,
			},
			{ type: 'separator' },
			{
				label: '閉じる',
				click: () => { remote.getCurrentWindow().close(); }
			}
		]);
		menu.popup({
			x: remote.getCurrentWindow().getSize()[0] - 57,
			y: 65
		});
	}

	moreMenu = () => {
		const menu = Menu.buildFromTemplate([
			{
				label: '新しいタブ',
				accelerator: 'CmdOrCtrl+T',
				click: () => { this.props.addTab('https://www.google.co.jp/'); }
			},
			{
				label: '新しいウィンドウ',
				accelerator: 'CmdOrCtrl+N',
				click: () => { ipcRenderer.send(`window-add`, { isPrivate: false }); }
			},
			{
				label: 'プライベート ウィンドウを開く',
				accelerator: 'CmdOrCtrl+Shift+N',
				click: () => { ipcRenderer.send(`window-add`, { isPrivate: true }); }
			},
			{ type: 'separator' },
			{
				label: '履歴',
				icon: `${app.getAppPath()}/static/history.png`,
				click: () => { this.props.addTab(`${protocolStr}://history`); }
			},
			{
				label: 'ダウンロード',
				icon: `${app.getAppPath()}/static/download.png`,
				click: () => { this.props.addTab(`${protocolStr}://downloads`); }
			},
			{
				label: 'ブックマーク',
				icon: `${app.getAppPath()}/static/bookmarks.png`,
				click: () => { this.props.addTab(`${protocolStr}://bookmarks`); }
			},
			{ type: 'separator' },
			{
				label: '印刷',
				icon: `${app.getAppPath()}/static/print.png`,
				enabled: false,
				click: () => { this.props.addTab(`${protocolStr}://history`); }
			},
			{
				label: '検索',
				icon: `${app.getAppPath()}/static/find.png`,
				enabled: false,
				click: () => { this.props.addTab(`${protocolStr}://history`); }
			},
			{ type: 'separator' },
			{
				label: '設定',
				icon: `${app.getAppPath()}/static/settings.png`,
				click: () => { this.props.addTab(`${protocolStr}://settings`); }
			},
			{
				label: 'ヘルプ',
				icon: `${app.getAppPath()}/static/help.png`,
				click: () => { this.props.addTab(`${protocolStr}://help`); }
			},
			{ type: 'separator' },
			{
				label: '閉じる',
				click: () => { this.props.closeWindow(); }
			}
		]);
		menu.popup({
			x: remote.getCurrentWindow().getSize()[0] - 24,
			y: 65
		});
	}

	isDarkModeOrPrivateMode = () => {
		return config.get('design.darkTheme') || String(this.props.windowId).startsWith('private');
	}

	isDarkModeOrPrivateMode = (lightMode, darkMode) => {
		return !(config.get('design.darkTheme') || String(this.props.windowId).startsWith('private')) ? lightMode : darkMode;
	}

	render() {
		return (
			<ContentWrapper>
				<Toolbar isDarkModeOrPrivateMode={config.get('design.darkTheme') || String(this.props.windowId).startsWith('private')}>
					<ToolbarButton isDarkModeOrPrivateMode={config.get('design.darkTheme') || String(this.props.windowId).startsWith('private')} src={this.state.canGoBack ? this.isDarkModeOrPrivateMode.bind(this, LightBackIcon, DarkBackIcon) : BackInActiveIcon} size={24}
						isShowing={true} isRight={false} isMarginLeft={true} isEnabled={this.state.canGoBack} title="前のページに戻る" onClick={() => { this.goBack(); }} />
					<ToolbarButton isDarkModeOrPrivateMode={config.get('design.darkTheme') || String(this.props.windowId).startsWith('private')} src={this.state.canGoForward ? this.isDarkModeOrPrivateMode.bind(this, LightForwardIcon, DarkForwardIcon) : ForwardInActiveIcon} size={24}
						isShowing={true} isRight={false} isMarginLeft={false} isEnabled={this.state.canGoForward} title="次のページに進む" onClick={() => { this.goForward(); }} />
					<ToolbarButton isDarkModeOrPrivateMode={config.get('design.darkTheme') || String(this.props.windowId).startsWith('private')} src={!this.state.isLoading ? this.isDarkModeOrPrivateMode.bind(this, LightReloadIcon, DarkReloadIcon) : this.isDarkModeOrPrivateMode.bind(this, LightCloseIcon, DarkCloseIcon)} size={24}
						isShowing={true} isRight={false} isMarginLeft={false} isEnabled={true} title={!this.state.isLoading ? '再読み込み' : '読み込み中止'} onClick={() => { this.reload(); }} />
					<ToolbarButton isDarkModeOrPrivateMode={config.get('design.darkTheme') || String(this.props.windowId).startsWith('private')} src={this.isDarkModeOrPrivateMode.bind(this, LightHomeIcon, DarkHomeIcon)} size={24}
						isShowing={config.get('design.homeButton')} isRight={false} isMarginLeft={false} isEnabled={true} title="ホームページに移動" onClick={() => { this.goHome(); }} />
					<ToolbarTextBoxWrapper isDarkModeOrPrivateMode={config.get('design.darkTheme') || String(this.props.windowId).startsWith('private')} buttonCount={config.get('design.homeButton') ? 6 : 5}>
						<ToolbarButton src={this.isDarkModeOrPrivateMode.bind(this, LightInfomationIcon, DarkInfomationIcon)} size={12}
							isShowing={true} isRight={false} isMarginLeft={true} isEnabled={true} title="このページの情報" />
						<ToolbarTextBox value={this.state.barText} onChange={(e) => { this.setState({ barText: e.target.value }); }} onKeyDown={this.handleKeyDown} onContextMenu={this.handleContextMenu} />
						<ToolbarButton data-tip={this.state.isBookmarked ? `${this.props.windowId.startsWith('private') ? 'プライベート ' : ''}ブックマークから削除しました。` : `${this.props.windowId.startsWith('private') ? 'プライベート ' : ''}ブックマークに追加しました。`} ref="markTooltip"
							isDarkModeOrPrivateMode={config.get('design.darkTheme') || String(this.props.windowId).startsWith('private')} src={this.state.isBookmarked ? this.isDarkModeOrPrivateMode.bind(this, LightStarFilledIcon, DarkStarFilledIcon) : this.isDarkModeOrPrivateMode.bind(this, LightStarIcon, DarkStarIcon)} size={12}
							isShowing={true} isRight={true} isMarginLeft={true} isEnabled={true} title={this.state.isBookmarked ? 'ブックマークから削除' : 'ブックマークに追加'} onClick={() => { this.bookMark(); }}>
							<Tooltip effect="solid" place="left" event="no-event" />
						</ToolbarButton>
					</ToolbarTextBoxWrapper>
					<ToolbarButton isDarkModeOrPrivateMode={config.get('design.darkTheme') || String(this.props.windowId).startsWith('private')} src={FeedbackIcon} size={24}
						isShowing={true} isRight={true} isMarginLeft={true} isEnabled={true} title="フィードバックの送信" />
					<ToolbarDivider isDarkModeOrPrivateMode={config.get('design.darkTheme') || String(this.props.windowId).startsWith('private')} />
					<ToolbarButton isDarkModeOrPrivateMode={config.get('design.darkTheme') || String(this.props.windowId).startsWith('private')} src={this.props.windowId.startsWith('private') ? this.isDarkModeOrPrivateMode.bind(this, LightShieldIcon, DarkShieldIcon) : this.isDarkModeOrPrivateMode.bind(this, LightAccountIcon, DarkAccountIcon)} size={24}
						isShowing={true} isRight={true} isMarginLeft={true} isEnabled={true} title={this.props.windowId.startsWith('private') ? 'プライベートモード' : process.env.USERNAME} onClick={() => { this.userMenu(); }} />
					<ToolbarButton isDarkModeOrPrivateMode={config.get('design.darkTheme') || String(this.props.windowId).startsWith('private')} src={this.isDarkModeOrPrivateMode.bind(this, LightMoreIcon, DarkMoreIcon)} size={24}
						isShowing={true} isRight={true} isMarginLeft={false} isEnabled={true} title="メニュー" onClick={() => { this.moreMenu(); }} />
				</Toolbar>
			</ContentWrapper>
		);
	}
}

class App extends Component {
	constructor(props) {
		super(props);

		this.state = {
			tabs: [],
			current: 0
		};

		ipcRenderer.on(`browserview-get-${this.props.match.params.windowId}`, (e, args) => {
			this.setState({ tabs: args.views });
		});

		ipcRenderer.on(`browserview-set-${this.props.match.params.windowId}`, (e, args) => {
			this.setState({ current: args.id });
		});
	}

	componentDidMount = () => {
		this.addTab();
	}

	handleContextMenu = (i) => {
		let t = this;
		const menu = Menu.buildFromTemplate([
			{
				label: '新しいタブ',
				accelerator: 'CmdOrCtrl+T',
				click: function () { t.addTab('https://www.google.co.jp/'); }
			},
			{
				label: 'タブを閉じる',
				accelerator: 'CmdOrCtrl+W',
				click: function () { t.removeTab(i); }
			},
			{ type: 'separator' },
			{
				type: 'checkbox',
				label: 'タブを固定',
				checked: t.state.tabs[i].fixed,
				click: function () {
					var newTabs = t.state.tabs.concat();
					newTabs[i].fixed = !t.state.tabs[i].fixed;
					t.setState({ tabs: newTabs });
				}
			}
		]);
		menu.popup(remote.getCurrentWindow());
	}

	getTabs = () => {
		ipcRenderer.send(`browserview-get-${this.props.match.params.windowId}`, {});
	}

	addTab = (url = config.get('homePage.defaultPage')) => {
		ipcRenderer.send(`browserview-add-${this.props.match.params.windowId}`, { url, isActive: true });
		ipcRenderer.send(`browserview-get-${this.props.match.params.windowId}`, {});
		this.setState({ current: this.state.tabs.length });
	}

	removeTab = (i) => {
		ipcRenderer.send(`browserview-remove-${this.props.match.params.windowId}`, { id: i });
		ipcRenderer.send(`browserview-get-${this.props.match.params.windowId}`, {});

		if ((this.state.tabs.length - 1) < 1) {
			remote.getCurrentWindow().close();
		}
	}

	updateTab = () => {
		ipcRenderer.send(`browserview-get-${this.props.match.params.windowId}`, {});
	}

	getForegroundColor = (hexColor) => {
		var r = parseInt(hexColor.substr(1, 2), 16);
		var g = parseInt(hexColor.substr(3, 2), 16);
		var b = parseInt(hexColor.substr(5, 2), 16);

		return ((((r * 299) + (g * 587) + (b * 114)) / 1000) < 128) ? '#ffffff' : '#000000';
	}

	isDarkModeOrPrivateMode = () => {
		return config.get('design.darkTheme') || String(this.props.match.params.windowId).startsWith('private');
	}

	isDarkModeOrPrivateMode = (lightMode, darkMode) => {
		return !(config.get('design.darkTheme') || String(this.props.match.params.windowId).startsWith('private')) ? lightMode : darkMode;
	}

	closeWindow = () => {
		if (this.state.tabs.length > 1) {
			const dlg = dialog.showMessageBox(remote.getCurrentWindow(), {
				type: 'info',
				buttons: ['Yes', 'No'],
				title: 'アプリ終了確認',
				message: `${this.state.tabs.length}個のタブを閉じようとしています。`,
				detail: `${this.state.tabs.length}個のタブを閉じてアプリを終了しようとしています。\n複数のタブを閉じてアプリを終了してもよろしいでしょうか？`,
				defaultId: 0,
				cancelId: 1
			});
			if (dlg === 0) {
				remote.getCurrentWindow().close();
			}
		} else {
			remote.getCurrentWindow().close();
		}
	}

	render() {
		return (
			<Window isCustomTitlebar={config.get('window.isCustomTitlebar')}>
				<Titlebar color={!String(this.props.match.params.windowId).startsWith('private') ? (platform.isWin32 || platform.isDarwin ? `#${systemPreferences.getAccentColor()}` : '#353535') : '#353535'}>
					<Tabs isCustomTitlebar={config.get('window.isCustomTitlebar')}>
						<TabContainer>
							{this.state.tabs.map((tab, i) => {
								return (
									<Tab isDarkModeOrPrivateMode={config.get('design.darkTheme') || String(this.props.match.params.windowId).startsWith('private')} isActive={tab.id == this.state.current} isFixed={tab.fixed} onClick={() => { ipcRenderer.send(`browserview-select-${this.props.match.params.windowId}`, { id: tab.id }); }} onContextMenu={this.handleContextMenu.bind(this, tab.id)}>
										<TabIcon src={tab.icon != undefined ? tab.icon : this.isDarkModeOrPrivateMode.bind(this, LightPublicIcon, DarkPublicIcon)} width={18} height={18} />
										<TabTitle color={this.getForegroundColor(!config.get('design.darkTheme') || !String(this.props.match.params.windowId).startsWith('private') ? (platform.isWin32 || platform.isDarwin ? `#${systemPreferences.getAccentColor()}` : '#353535') : '#353535')} isFixed={tab.fixed} title={tab.title}>{tab.title}</TabTitle>
										<TabCloseButton isActive={tab.id == this.state.current} isFixed={tab.fixed} isRight={true} src={this.isDarkModeOrPrivateMode.bind(this, LightCloseIcon, DarkCloseIcon)} size={14} title="このタブを閉じる" onClick={() => { this.removeTab(tab.id); }} />
									</Tab>
								);
							})}
						</TabContainer>
						<TabButton isRight={true} src={!config.get('design.darkTheme') || !String(this.props.match.params.windowId).startsWith('private') ? LightAddIcon : DarkAddIcon} size={24} title="新しいタブを開く" onClick={() => { this.addTab(); }} />
					</Tabs>
					<WindowButtons isCustomTitlebar={config.get('window.isCustomTitlebar')}>
						<WindowButton isClose={false} title="最小化" onClick={() => { remote.getCurrentWindow().minimize(); }}>
							<svg name="TitleBarMinimize" width="12" height="12" viewBox="0 0 12 12">
								<rect fill={this.getForegroundColor(platform.isWin32 || platform.isDarwin ? `#${systemPreferences.getAccentColor()}` : '#353535')} width="10" height="1" x="1" y="6" />
							</svg>
						</WindowButton>
						<WindowButton isClose={false} title={remote.getCurrentWindow().isMaximized() ? '元に戻す (縮小)' : '最大化'} onClick={() => { remote.getCurrentWindow().isMaximized() ? remote.getCurrentWindow().unmaximize() : remote.getCurrentWindow().maximize(); this.forceUpdate(); }}>
							<svg name="TitleBarMaximize" width="12" height="12" viewBox="0 0 12 12">
								<rect stroke={this.getForegroundColor(platform.isWin32 || platform.isDarwin ? `#${systemPreferences.getAccentColor()}` : '#353535')} fill="none" width="9" height="9" x="1.5" y="1.5" />
							</svg>
						</WindowButton>
						<WindowButton isClose={true} title="閉じる" onClick={() => { this.closeWindow(); }}>
							<svg name="TitleBarClose" width="12" height="12" viewBox="0 0 12 12">
								<polygon fill={this.getForegroundColor(platform.isWin32 || platform.isDarwin ? `#${systemPreferences.getAccentColor()}` : '#353535')} fill-rule="evenodd" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1" />
							</svg>
						</WindowButton>
					</WindowButtons>
				</Titlebar>
				<WindowContent>
					{this.state.tabs.map((tab, i) => {
						return (
							<TabContent isActive={tab.id == this.state.current}>
								<BrowserView key={i} windowId={this.props.match.params.windowId} index={tab.id} url={tab.url}
									closeWindow={() => { this.closeWindow(); }}
									addTab={(url) => { this.addTab(url); }}
									updateTab={() => { this.updateTab(); }} />
							</TabContent>
						);
					})}
				</WindowContent>
			</Window>
		);
	}
}

export default App;