import * as React from 'react';
import { observable } from 'mobx';
import { observer } from 'mobx-react';

import { DocumentModel } from '../models';
import { Icon, Tooltip } from '../controls';

@observer
export class Component extends React.Component<{
  record: DocumentModel,
  privateKey: string,
  getLabel: (privateKey: string, url: string) => Promise<string>,
}, {}>  {
  @observable isLoading = false;
  @observable isError = false;
  @observable result: string | undefined;

  url: string = '';

  componentWillUnmount() {
    URL.revokeObjectURL(this.url);
  }

  loadFile = () => {
    const { record, privateKey } = this.props;
    this.isLoading = true;
    this.props.getLabel(privateKey, record.url)
      .then(res => { this.isLoading = false; this.result = res; })
      .catch(err => { this.isLoading = false; this.isError = true; });
  }

  render() {
    if (this.isLoading) {
      return (<Icon type={'loading'} />);
    }

    if (this.isError) {
      return (
        <Tooltip title={'Label not available'}>
          <Icon type="exclamation-circle-o" />
        </Tooltip>
      );
    }

    if (this.result) {
      const name = `${this.props.record.id}.${this.props.record.fileType}`;

      this.url = URL.createObjectURL(new Blob([this.result]));

      return (
        <Tooltip title={'Download is ready'}>
          <a href={this.url} download={name}>
            <Icon type={'download'} />
          </a>
        </Tooltip>
      );
    }

    return (
      <a onClick={() => { this.loadFile(); }}>{'Check'}</a>
    );
  }
}

import { connect } from 'react-redux';
import { RootState } from '@src/modules';
import { SitesSelectors } from '@src/modules/sites';
import { getLabel } from '@src/services';
const mapStateToProps = (state: RootState) => ({
  privateKey: SitesSelectors.getSelectedSitePrivateKey(state),
  getLabel: getLabel,
});

const Connected = connect(mapStateToProps, {
})(Component);

export default Connected;