import axios, { CancelToken } from 'axios';
import React from 'react';
import { Button, Glyphicon } from 'react-bootstrap';
import {
  getDatasetStatus,
  getDownloadURLByDatasetId,
} from '../../api/icat/icatPlus';

export default class DatasetDownloadButton extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      status: 'FETCHING',
      fetching: false,
      fetched: false,
    };
  }

  getStatus() {
    this.tokenSource = CancelToken.source();

    axios
      .get(getDatasetStatus(this.props.sessionId, this.props.id), {
        cancelToken: this.tokenSource.token,
      })
      .then((response) => {
        this.setState({
          status: response.data,
          fetching: false,
          fetched: true,
        });
      })
      .catch((error) => {
        if (axios.isCancel(error)) {
          this.tokenSource = undefined;
          return;
        }

        this.setState({
          status: `${error.response.data.message || ''} ${this.props.id}`,
          fetching: false,
          fetched: true,
        });
      });
  }

  restore() {
    axios
      .get(getDownloadURLByDatasetId(this.props.sessionId, this.props.id))
      .then(() => {
        this.getStatus();
      })
      .catch(() => {
        this.getStatus();
      });
  }

  componentDidMount() {
    if (!this.state.fetching) {
      this.setState({
        fetching: true,
      });
    }

    this.getStatus();
  }

  componentWillUnmount() {
    if (this.tokenSource) {
      this.tokenSource.cancel();
    }
  }

  render() {
    const downloadURL = getDownloadURLByDatasetId(
      this.props.sessionId,
      this.props.id
    );
    if (this.state.status === 'ONLINE') {
      return (
        <a style={{ color: 'black' }} href={downloadURL}>
          <Button bsStyle="primary" bsSize="xsmall">
            <Glyphicon glyph="download-alt" />
            <span style={{ marginLeft: 10 }} />
            Download
          </Button>
        </a>
      );
    }

    if (this.state.status === 'RESTORING') {
      return (
        <a style={{ color: 'black' }} href={downloadURL}>
          <Button variant="dark" bsSize="xsmall">
            <Glyphicon bsSize="xsmall" className="spin" glyph="repeat" />
            <span style={{ color: 'black', marginLeft: 10 }}>Restoring</span>
          </Button>
        </a>
      );
    }

    if (this.state.status === 'ARCHIVED') {
      return (
        <Button
          variant="light"
          bsSize="xsmall"
          onClick={(e) => {
            this.restore(e);
          }}
        >
          <Glyphicon style={{ color: 'black' }} glyph="tasks" />
          <span style={{ color: 'black', marginLeft: 10 }}>Restore</span>
        </Button>
      );
    }

    if (this.state.status === 'FETCHING') {
      return (
        <span>
          <Glyphicon
            style={{ marginLeft: 10 }}
            className="spin"
            glyph="repeat"
          />
        </span>
      );
    }

    return <span>{this.state.status}</span>;
  }
}
