import React, { useCallback } from 'react';
import { Button, Intent } from '@blueprintjs/core';
import { useHistory } from 'react-router-dom';

import WorkflowIcon from './WorkflowIcon';
import { FormattedMessage as T } from 'components';

import withOrganizationActions from 'containers/Organization/withOrganizationActions';
import { compose } from 'utils';

import 'style/pages/Setup/Congrats.scss';


/**
 * Setup congrats page.
 */
function SetupCongratsPage({ setOrganizationSetupCompleted }) {
  const history = useHistory();

  const handleBtnClick = useCallback(() => {
    setOrganizationSetupCompleted(false);
    history.push('/homepage');
  }, [setOrganizationSetupCompleted, history]);

  return (
    <div class="setup-congrats">
      <div class="setup-congrats__workflow-pic">
        <WorkflowIcon width="280" height="330" />
      </div>

      <div class="setup-congrats__text">
        <h1>
          <T id={'setup.congrats.title'} />
        </h1>

        <p class="paragraph">
          <T id={'setup.congrats.description'} />
        </p>

        <Button intent={Intent.PRIMARY} type="submit" onClick={handleBtnClick}>
          <T id={'setup.congrats.go_to_dashboard'} />
        </Button>
      </div>
    </div>
  );
}

export default compose(withOrganizationActions)(SetupCongratsPage);