import React, { Component } from 'react';
import { connect } from 'react-redux';
import {Form} from "semantic-ui-react";

import { uploadDoorLockData } from "../../../store/actions";

class FileUpload extends Component {
    constructor(props) {
        super(props);

        this.state = {
            file: null,
        };

        this.onFileChange = this.onFileChange.bind(this);
        this.onUploadClick = this.onUploadClick.bind(this);
    }

    onFileChange(event) {
        const file = event.target.files[0];
        this.setState({file});
    };

    onUploadClick() {
        const { uploadDoorLockData } = this.props;
        const { file } = this.state;

        if (file) {
            uploadDoorLockData(file);
        }
    };

    render() {
        const { pending } = this.props;
        return (
            <div>
                <Form.Input
                    fluid
                    required
                    label="Select DLock file"
                    type="file"
                    accept=".csv"
                    onChange={this.onFileChange}
                />
                <Form.Button onClick={this.onUploadClick} disabled={pending} >Upload</Form.Button>
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    pending: state.doorLockData.pending,
});

const mapDispatchToProps = (dispatch) => ({
    uploadDoorLockData: (doorLockDataFile) => uploadDoorLockData(dispatch, doorLockDataFile)
});

export default connect(mapStateToProps, mapDispatchToProps)(FileUpload);