import * as React from 'react';
import { connect } from 'react-redux';
import { AppState } from '../../app.reducer';
import CommandService from '@joplin/lib/services/CommandService';
import { _ } from '@joplin/lib/locale';
import { type ProgressReport } from '@joplin/lib/Synchronizer';

interface Props {
	syncStarted: boolean;
	syncPending: boolean;
	syncReport: ProgressReport;
}

const syncCompletedWithoutError = (syncReport: ProgressReport) => {
	return syncReport.completedTime && (!syncReport.errors || !syncReport.errors.length);
};

// 侧边栏顶部的同步按钮：只保留图标，状态通过图标本身表达
const SyncButton: React.FC<Props> = props => {
	const syncing = props.syncStarted;
	const nothingToSync = !syncing && !props.syncPending && syncCompletedWithoutError(props.syncReport);
	const hasErrors = !syncing && !props.syncPending && !!props.syncReport.errors?.length;

	const label = syncing ? _('Cancel') : _('Synchronise');
	const iconName = hasErrors ? 'fas fa-exclamation-triangle' : nothingToSync ? 'fas fa-check' : 'icon-sync';

	const classes = ['sidebar-header-button', '-sync'];
	if (syncing) classes.push('-syncing');

	return <button
		className={classes.join(' ')}
		title={label}
		aria-label={label}
		onClick={() => {
			void CommandService.instance().execute('synchronize', syncing);
		}}
	>
		<i aria-hidden='true' role='img' className={iconName}/>
	</button>;
};

export default connect((state: AppState) => {
	return {
		syncStarted: state.syncStarted,
		syncPending: state.syncPending,
		syncReport: state.syncReport,
	};
})(SyncButton);