import React, { Component } from 'react';

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';

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

const platform = require('electron-platform');

const Config = window.require('electron-store');
const config = new Config({
	defaults: {
		design: {
			homeButton: false,
			darkTheme: false,
			theme: 'default'
		},
		homePage: {
			defaultPage: 'my://newtab',
			defaultEngine: 'Google',
			searchEngines: [
				{
					name: 'Google',
					url: 'https://www.google.com/search?q=%s'
				},
				{
					name: 'Bing',
					url: 'https://www.bing.com/search?q=%s'
				},
				{
					name: 'Yahoo! Japan',
					url: 'https://search.yahoo.co.jp/search?p=%s'
				},
				{
					name: 'goo',
					url: 'https://search.goo.ne.jp/web.jsp?MT=%s'
				},
				{
					name: 'Google Translate',
					url: 'https://translate.google.com/?text=%s'
				},
				{
					name: 'Youtube',
					url: 'https://www.youtube.com/results?search_query=%s'
				},
				{
					name: 'Twitter',
					url: 'https://www.twitter.com/search?q=%s'
				},
				{
					name: 'GitHub',
					url: 'https://github.com/search?q=%s'
				}
			]
		},
		adBlocker: true,
		window: {
			isCustomTitlebar: true,
			isMaximized: false,
			bounds: {
				width: 1100,
				height: 680
			}
		}
	},
});

class Authentication extends Component {
	constructor(props) {
		super(props);
		this.state = {
			userName: '',
			passWord: ''
		};

		document.title = '認証';
	}

	submit = () => {
		const username = this.state.userName;
		const password = this.state.passWord;
		ipcRenderer.send('authorization', { username, password });
	}

	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';
	}

	render() {
		return (
			<Window isCustomTitlebar={config.get('window.isCustomTitlebar')}>
				<Titlebar color={platform.isWin32 || platform.isDarwin ? `#${systemPreferences.getAccentColor()}` : '#353535'}>
					<WindowButtons isCustomTitlebar={config.get('window.isCustomTitlebar')}>
						<WindowButton isClose={true} title="閉じる" onClick={() => { remote.getCurrentWindow().close(); }}>
							<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>
					<div style={{ width: '100%', height: '100%', padding: 5 }}>
						<label style={{ whiteSpace: 'normal' }}>このサイトにログインするための認証情報を入力してください。</label>
						<label style={{ marginBottom: 0 }}>ユーザー名</label>
						<input type="text" value={this.state.userName} onChange={(e) => { this.setState({ userName: e.target.value }); }} style={{ width: '100%', cursor: 'initial' }} />
						<label style={{ marginBottom: 0 }}>パスワード</label>
						<input type="password" value={this.state.passWord} onChange={(e) => { this.setState({ passWord: e.target.value }); }} style={{ width: '100%', cursor: 'initial'}} />
						<button onClick={() => { this.close(); }} style={{ position: 'absolute', bottom: 5, left: 5, width: '48%' }}>キャンセル</button>
						<button onClick={this.submit.bind(this)} style={{ position: 'absolute', bottom: 5, right: 5, width: '48%' }}>送信</button>
					</div>
				</WindowContent>
			</Window>
		);
	}
}

export default Authentication;