import * as React from 'react';
import classnames from 'classnames';
import styles from './BrowseInput.sass';
import IReactComponentProps from '../../../common/structures/IReactComponentProps';
import { TextButton, TextButtonPropSize } from '../../buttons/TextButton/TextButton';
import untildify from 'untildify';
import { FunctionGeneric } from '../../../common/structures/Generics';

const { ipcRenderer } = require('electron');

interface IProps extends IReactComponentProps {
	defaultPath?: string;
	dialogProperties?: string[];
	dialogTitle?: string;
	isFormInput?: boolean;
	isInline?: boolean;
	onChange?: FunctionGeneric;
	placeholder?: string;
	value?: string;
}

interface IState {
	value: string | undefined;
}

export default class BrowseInput extends React.Component<IProps, IState> {
	constructor (props: IProps) {
		super(props);

		this.state = {
			value: this.props.value || '',
		};

		this.browseFolder = this.browseFolder.bind(this);
	}

	UNSAFE_componentWillReceiveProps (nextProps: IProps) {
		if ('value' in nextProps) {
			this.setState({ value: nextProps.value });
		}
	}

	async browseFolder () {
		const { canceled, filePaths } = await ipcRenderer.invoke(
			'ui:open-dialog-in-current-window',
			{
				defaultPath: untildify(this.state.value! || this.props.defaultPath!),
				properties: this.props.dialogProperties,
				title: this.props.dialogTitle,
			}
		);

		if (canceled || !filePaths) {
			return;
		}

		const value = filePaths[0];

		if (this.props.onChange && this.props.onChange.call(this, value) === false) {
			return false;
		}

		this.setState({ value });
	}

	render () {
		return (
			<div
				className={classnames(
					styles.BrowseInput,
					{
						[styles.BrowseInput__Inline]: this.props.isInline,
						[styles.BrowseInput__FormInput]: this.props.isFormInput,
					},
					this.props.className,
				)}
				id={this.props.id}
				style={this.props.style}
			>
				<span
					className={classnames({
						[styles.BrowseInput_Placeholder]: this.props.placeholder && !this.state.value,
					})}
				>
					{this.state.value || this.props.placeholder}
				</span>
				<TextButton
					size={TextButtonPropSize.tiny}
					style={{
						marginLeft: '10px',
						padding: 0,
					}}
					onClick={this.browseFolder}
				>
					Browse
				</TextButton>
			</div>
		);
	}
}