//@TODO: Customize advice based on OS
import React from 'react';
import lbry from 'lbry.js';
import Link from 'component/link';
import SubHeader from 'component/subHeader';
import { BusyMessage } from 'component/common';

class HelpPage extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			versionInfo: null,
			lbryId: null,
			uiVersion: null,
			upgradeAvailable: null
		};
	}

	componentWillMount() {
		lbry.getAppVersionInfo().then(({ remoteVersion, upgradeAvailable }) => {
			this.setState({
				uiVersion: remoteVersion,
				upgradeAvailable: upgradeAvailable
			});
		});
		lbry.call('version', {}, info => {
			this.setState({
				versionInfo: info
			});
		});
		lbry.getSessionInfo(info => {
			this.setState({
				lbryId: info.lbry_id
			});
		});
	}

	render() {
		let ver, osName, platform, newVerLink;

		const { navigate } = this.props;

		if (this.state.versionInfo) {
			ver = this.state.versionInfo;
			if (ver.os_system == 'Darwin') {
				osName = parseInt(ver.os_release.match(/^\d+/)) < 16
					? 'Mac OS X'
					: 'Mac OS';

				platform = `${osName} ${ver.os_release}`;
				newVerLink = 'https://lbry.io/get/lbry.dmg';
			} else if (ver.os_system == 'Linux') {
				platform = `Linux (${ver.platform})`;
				newVerLink = 'https://lbry.io/get/lbry.deb';
			} else {
				platform = `Windows (${ver.platform})`;
				newVerLink = 'https://lbry.io/get/lbry.msi';
			}
		} else {
			ver = null;
		}

		return (
			<main className="main--single-column">
				<SubHeader />
				<section className="card">
					<div className="card__title-primary">
						<h3>{__('Read the FAQ')}</h3>
					</div>
					<div className="card__content">
						<p>{__('Our FAQ answers many common questions.')}</p>
						<p>
							<Link
								href="https://lbry.io/faq"
								label={__('Read the FAQ')}
								icon="icon-question"
								button="alt"
							/>
						</p>
					</div>
				</section>
				<section className="card">
					<div className="card__title-primary">
						<h3>{__('Get Live Help')}</h3>
					</div>
					<div className="card__content">
						<p>
							{__('Live help is available most hours in the')}
							{' '}<strong>#help</strong>
							{' '}{__('channel of our Slack chat room.')}
						</p>
						<p>
							<Link
								button="alt"
								label={__('Join Our Slack')}
								icon="icon-slack"
								href="https://slack.lbry.io"
							/>
						</p>
					</div>
				</section>
				<section className="card">
					<div className="card__title-primary">
						<h3>{__('Report a Bug')}</h3>
					</div>
					<div className="card__content">
						<p>{__('Did you find something wrong?')}</p>
						<p>
							<Link
								onClick={() => navigate('report')}
								label={__('Submit a Bug Report')}
								icon="icon-bug"
								button="alt"
							/>
						</p>
						<div className="meta">
							{__('Thanks! LBRY is made by its users.')}
						</div>
					</div>
				</section>
				<section className="card">
					<div className="card__title-primary"><h3>{__('About')}</h3></div>
					<div className="card__content">
						{this.state.upgradeAvailable === null
							? ''
							: this.state.upgradeAvailable
								? <p>
										{__('A newer version of LBRY is available.')}
										{' '}<Link href={newVerLink} label={__('Download now!')} />
									</p>
								: <p>{__('Your copy of LBRY is up to date.')}</p>}
						{this.state.uiVersion && ver
							? <table className="table-standard">
									<tbody>
										<tr>
											<th>{__('daemon (lbrynet)')}</th>
											<td>{ver.lbrynet_version}</td>
										</tr>
										<tr>
											<th>{__('wallet (lbryum)')}</th>
											<td>{ver.lbryum_version}</td>
										</tr>
										<tr>
											<th>{__('interface')}</th>
											<td>{this.state.uiVersion}</td>
										</tr>
										<tr>
											<th>{__('Platform')}</th>
											<td>{platform}</td>
										</tr>
										<tr>
											<th>{__('Installation ID')}</th>
											<td>{this.state.lbryId}</td>
										</tr>
									</tbody>
								</table>
							: <BusyMessage message={__('Looking up version info')} />}
					</div>
				</section>
			</main>
		);
	}
}

export default HelpPage;