import React from 'react';
import { Icon, Button } from 'UI';
import { connect } from 'react-redux';
import { onboarding as onboardingRoute } from 'App/routes';
import { withRouter } from 'react-router-dom';
import * as routes from '../../../routes';

const withSiteId = routes.withSiteId;

const NoSessionsMessage = (props) => {
  const {
    sites,
    siteId
  } = props;
  const activeSite = sites.find((s) => s.id === siteId);
  const showNoSessions = !!activeSite && !activeSite.recorded;
  const onboardingPath = withSiteId(onboardingRoute('installing'), siteId);

  return (
    <>
      {showNoSessions && (
        <div>
          <div
            className='rounded text-sm flex items-center p-2 justify-between mb-4'
            style={{ backgroundColor: 'rgba(255, 239, 239, 1)', border: 'solid thin rgba(221, 181, 181, 1)' }}
          >
            <div className='flex items-center w-full'>
              <div className='flex-shrink-0 w-8 flex justify-center'>
                <Icon name='info-circle' size='14' color='gray-darkest' />
              </div>
              <div className='ml-2 color-gray-darkest mr-auto text-base'>
                It might take a few minutes for first recording to appear.
                <a href='https://docs.openreplay.com/en/troubleshooting/session-recordings/' className='link ml-2'>
                  Troubleshoot
                </a>
                .
              </div>
              <Button
                variant='primary'
                className='h-8 text-base'
                onClick={() => props.history.push(onboardingPath)}
              >
                Complete Project Setup
              </Button>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default connect((state) => ({
  site: state.getIn(['site', 'siteId']),
  sites: state.getIn(['site', 'list'])
}))(withRouter(NoSessionsMessage));