import * as React from 'react';
import Button, { ButtonLevel } from '../Button/Button';
import { _ } from '@joplin/lib/locale';
import styled from 'styled-components';

interface StyleProps {
	theme: {
		backgroundColor3: string;
		configScreenPadding: number;
		dividerColor: string;
	};
}

interface Props {
	backButtonTitle?: string;
	hasChanges?: boolean;
	onCancelClick: ()=> void;
	onSaveClick?: ()=> void;
	onApplyClick?: ()=> void;
}

const StyledRoot = styled.nav`
	display: flex;
	align-items: center;
	min-height: 72px;
	padding: 12px clamp(24px, 3vw, 48px);
	background-color: ${(props: StyleProps) => props.theme.backgroundColor3};
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: ${(props: StyleProps) => props.theme.dividerColor};
`;

export default function ButtonBar(props: Props) {
	function renderOkButton() {
		if (!props.onSaveClick) return null;
		return <Button style={{ marginRight: 10 }} level={ButtonLevel.Primary} disabled={!props.hasChanges} onClick={props.onSaveClick} title={_('OK')}/>;
	}

	function renderApplyButton() {
		if (!props.onApplyClick) return null;
		return <Button level={ButtonLevel.Primary} disabled={!props.hasChanges} onClick={props.onApplyClick} title={_('Apply')}/>;
	}

	return (
		<StyledRoot className='button-bar'>
			<Button
				onClick={props.onCancelClick}
				level={ButtonLevel.Secondary}
				iconName="fa fa-chevron-left"
				title={props.backButtonTitle ? props.backButtonTitle : _('Back')}
			/>
			{ (props.onApplyClick || props.onSaveClick) && (
				<div style={{ display: 'flex', flexDirection: 'row', marginLeft: 30 }}>
					{renderOkButton()}
					{renderApplyButton()}
				</div>
			)}
		</StyledRoot>
	);
}