import React, {Component} from 'react';
import {Col, Container, Row} from 'reactstrap';
import {Link} from 'react-router-dom';
import {withTranslation, Trans} from 'react-i18next';
import {faCopy, faUsers, faExclamationTriangle} from '@fortawesome/free-solid-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import logoLine from '../../logos/logo-line-white.svg';
import {AppContext} from '../../AppContext';
import CopyField from '../CopyField';




class CreateSuccess extends Component {
  static contextType = AppContext;
  constructor(props) {
    super(props);
    const electionSlug = this.props.match.params.slug;
    this.state = {
      urlOfVote:
          window.location.origin + '/vote/' + electionSlug,
      urlOfResult:
          window.location.origin + '/result/' + electionSlug,
    };
    this.urlVoteField = React.createRef();
    this.urlResultField = React.createRef();
  }

  handleClickOnCopyResult = event => {
    const input = this.urlResultField.current;
    input.focus();
    input.select();
    document.execCommand('copy');
  };

  render() {
    const {t} = this.props;
    const electionLink = this.props.invitationOnly ? (
      <>
        <p className="mt-4 mb-1">
          {t('Voters received a link to vote by email. Each link can be used only once!')}
        </p>
      </>
    ) : (
      <>
        <p className="mt-4 mb-1">
          {t('You can now share the election link to participants:')}
        </p>
        <CopyField
          value={this.state.urlOfVote}
          icon={faCopy}
          t={t}
        />
      </>
    );

    return (
      <Container>
        <Row>
          <Link to="/" className="d-block ml-auto mr-auto mb-4">
            <img src={logoLine} alt="logo" height="128" />
          </Link>
        </Row>
        <Row className="mt-4">
          <Col className="text-center offset-lg-3" lg="6">
            <h2>{t('Successful election creation!')}</h2>

            {electionLink}

            <p className="mt-4 mb-1">
              {t('Here is the link for the results in real time:')}
            </p>
            <CopyField
              value={this.state.urlOfResult}
              icon={faCopy}
              t={t}
            />
          </Col>
        </Row>
        <Row className="mt-4 mb-4">
          <Col className="text-center offset-lg-3" lg="6">
            <div className=" bg-danger text-white p-2 ">
              <h4 className="m-0 p-0 text-center">
                <FontAwesomeIcon icon={faExclamationTriangle} className="mr-2" />
                 {t('Keep these links carefully')}

              </h4>
              <p className="small m-2 p-0">
                <Trans i18nKey="t">
                  <b>Warning</b>: you will have no other choices to recover the
                  links, and we will not be able to share them with you. For
                  example, you can bookmark them in your browser.
                </Trans>
              </p>
            </div>
          </Col>
        </Row>

        <Row className="mt-4 mb-4">
          <Col className="text-center">
            <Link
              to={'/vote/' + this.props.match.params.slug}
              className="btn btn-success">
              <FontAwesomeIcon icon={faUsers} className="mr-2" />
              {t('Participate now!')}
            </Link>
          </Col>
        </Row>
      </Container>
    );
  }
}
export default withTranslation()(CreateSuccess);