import React from 'react';
import { connect } from 'react-redux';
import { RouteComponentProps } from 'react-router';
import TabSection from 'containers/TabSection';
import TxHashInput from './components/TxHashInput';
import { TransactionStatus as TransactionStatusComponent } from 'components';
import { NewTabLink } from 'components/ui';
import { getNetworkConfig } from 'selectors/config';
import { getParamFromURL } from 'utils/helpers';
import { AppState } from 'reducers';
import { NetworkConfig } from 'types/network';
import './index.scss';

interface StateProps {
  network: NetworkConfig;
}

interface State {
  hash: string;
}

type Props = StateProps & RouteComponentProps<{}>;

class CheckTransaction extends React.Component<Props, State> {
  public state: State = {
    hash: ''
  };

  public componentDidMount() {
    const hash = getParamFromURL(this.props.location.search, 'txHash');
    if (hash) {
      this.setState({ hash });
    }
  }

  public render() {
    const { network } = this.props;
    const { hash } = this.state;

    return (
      <TabSection>
        <div className="CheckTransaction Tab-content">
          <section className="CheckTransaction-form Tab-content-pane">
            <h1 className="CheckTransaction-form-title">Check Transaction Status</h1>
            <p className="CheckTransaction-form-desc">
              Enter your Transaction Hash to check on its status.{' '}
              {!network.isCustom && (
                <React.Fragment>
                  If you don’t know your Transaction Hash, you can look it up on the{' '}
                  <NewTabLink href={network.blockExplorer.origin}>
                    {network.blockExplorer.name} explorer
                  </NewTabLink>{' '}
                  by looking up your address.
                </React.Fragment>
              )}
            </p>
            <TxHashInput hash={hash} onSubmit={this.handleHashSubmit} />
          </section>

          {hash && (
            <section className="CheckTransaction-tx Tab-content-pane">
              <TransactionStatusComponent txHash={hash} />
            </section>
          )}
        </div>
      </TabSection>
    );
  }

  private handleHashSubmit = (hash: string) => {
    // Reset to re-mount the component
    this.setState({ hash: '' }, () => {
      this.setState({ hash });
    });
  };
}

export default connect((state: AppState): StateProps => ({
  network: getNetworkConfig(state)
}))(CheckTransaction);