import PropTypes from 'prop-types';
import { Component } from "react";
import { Modal, Button } from "react-bootstrap";
import Select from 'react-select';
import "./LibraryDialog.scss";

export default class LibraryDialog extends Component {
	static defaultProps = {
		platform: null,
	};
	static propTypes = {
		onHide: PropTypes.func.isRequired,
		onSubmit: PropTypes.func.isRequired,
		platform: PropTypes.object,
		apiURL: PropTypes.string.isRequired,
  }

  constructor(props){
    super(props);

    this.state = {
				availableFolders: [],
				selectedFolder: null,
				loadingFolders: true,
				error: "",
    };
  }
	
	componentDidUpdate(){
    if (this.props.platform !== null && this.props.platform.type == "library" && this.state.loadingFolders){
	    $.get(`${this.props.apiURL}/cloudlibrary/${this.props.platform.name}/listfolders`)
	    .done(result => {
	      result.folders.forEach(album => {
	        album.label = `${album.name} (${album.images_count} images)`;
	        album.value = album.url;
	      })
	      this.setState({availableFolders: result.folders});
	    })
	    .fail((error) => {
	        this.setState({loadingFolders: false, error: "Cannot load folders. Check your internet connection."});
	    })
			.always(() => {
				this.setState({loadingFolders: false});
			});
    }
  }
	
	handleSelectFolder = (e) => this.setState({selectedFolder: e});
	handleSubmit = e => this.props.onSubmit(this.state.selectedFolder);
	
	render() {
		const {
			onHide,
			platform,
		} = this.props;

		const title = "Import from " + (platform !== null ? platform.name : "Platform");
		const isVisible = platform !== null && platform.type === "library";
		return (
			<Modal className={"folder-select"} onHide={onHide} show={isVisible}>
				<Modal.Header closeButton>
					<Modal.Title>
						{title}
					</Modal.Title>
				</Modal.Header>
				<Modal.Body bsClass="my-modal">
					<p>Import the images from your <a target="_blank" href={platform === null ? "" : platform.server_url}>{platform === null ? "" : platform.name} library</a> into a new task.</p>
					<Select
						className="basic-single"
						classNamePrefix="select"
						isLoading={this.state.loadingFolders}
						isClearable={false}
						isSearchable={true}
						onChange={this.handleSelectFolder}
						options={this.state.availableFolders}
						placeholder={this.state.loadingFolders ? "Fetching Piwigo albums..." : "Please select a Piwigo album"}
						name="options"
					/>
				</Modal.Body>
				<Modal.Footer>
					<Button onClick={onHide}>Close</Button>
					<Button
						bsStyle="primary"
						disabled={this.state.selectedFolder === null}
						onClick={this.handleSubmit}
					>
						<i className={"fa fa-upload"} />
						Import
					</Button>
				</Modal.Footer>
			</Modal>
		);
	}
}