import React, { Component, useState, useEffect } from 'react';
import { Col, Row, Navbar, Button } from 'react-bootstrap';
import { PDFViewer } from '@react-pdf/renderer';
import { Document, Page } from 'react-pdf';

class Intro extends Component {

  constructor(props) {
    super(props)
  }

  go_to_tutorial() {
    var pageType = {
      pathname: '/tutorial',
      state: {
        data: {
        }
      }
    }
    this.props.history.push(pageType)

  }



  render() {
    var user = navigator.userAgent
    var browser_supported = true //user.includes('Chrome')

    console.log(user)
    var mobile_device = /Opera Mini/i.test(navigator.userAgent)
    if (mobile_device || !browser_supported) {
      return (<>
        <Row className={'justify-content-center'}>
          <Col lg={6} className={'text-box text-justify'}>

            <p>Sorry, your browser is not supported.</p>
            <p>Please download <a href={'https://www.mozilla.org/en-US/firefox/new/'}>Firefox</a> (version 80 or newer) or <a href={'https://www.google.com/chrome/'}>Chrome</a> (version 85 or newer) on your computer and try again.</p>

          </Col>

        </Row>
      </>
      );
    }

    return (
      <>
        <Row className={'justify-content-center no-margin-row'}>
          <div className='heading-term'>Згода на участь в дослідженні з візуалізації даних</div>
          <div className={'terms-container'}>
            <div className='terms'>
              <p>
                Запрошуємо взяти участь в дослідженні, що проводять викладачі та студенти Київської школи економіки. Ми пропонуємо це Вам, оскільки Ви — доросла людина, що володіє українською мовою. Мета дослідження полягає в адаптації інструменту, який вимірює, наскільки добре люди можуть зчитувати, розуміти та використовувати візуалізації даних для вирішення повсякденних проблем.
              </p>
              <p>
                Якщо Ви погоджуєтеся взяти участь, пропонуємо вам відповісти на декілька запитань щодо змісту декількох візуалізацій. Ви побачите візуалізацію даних та запитання, на яке потрібно дати відповідь. Виберіть ту відповідь, яку вважаєте НАЙТОЧНІШОЮ. Якщо Ви не впевнені, виберіть «Пропустити» замість того, щоб вгадувати. Ви також можете пропустити будь-які запитання, на які вважаєте за краще не відповідати. У кінці ми попросимо Вас заповнити короткий демографічний опитувальник.
              </p>
              <p>
                Дані, які ми зберемо протягом цього опитування, будуть використані в поточному та подальших дослідженнях грамотності в сфері візуалізації даних.
              </p>
              {/* <p>
                Ці дослідження можуть надати додаткову інформацію, яка буде корисною для розробки кращих інструментів візуальної комунікації. Скоріш за все знахідки з цих досліджень не матимуть для вас прямої користі. Немає планів надавати вам фінансову компенсацію, якщо це станеться. Дозволивши нам використовувати ваші дані, ви відмовляєтеся від будь-яких прав власності, які ви можете мати на ці дані.
              </p> */}
              <p>
                Зібрані дані будуть передані іншим дослідникам, які проводитимуть дослідження в цій або суміжних сферах. Також ми можемо опублікувати зібрані дані в репозиторіях для широкого доступу наукової спільноти. Якщо ваші особисті дані будуть розміщені в одному з цих репозиторіїв, лише кваліфіковані дослідники, які отримали попередню згоду від осіб, які контролюють використання даних, зможуть переглядати цю інформацію.
              </p>
              <p>
                Ваші дані будуть збережені без вашого імені чи будь-якої іншої інформації, яка дозволила б нам ідентифікувати вас персонально. Тому вони будуть доступні безстроково для використання в майбутніх дослідженнях без вашої додаткової згоди та не можуть бути видалені.
              </p>
              <p>Участь в цьому дослідженні не містить для вас жодних відомих потенційних ризиків.</p>
              <p>
                Якщо Ви маєте будь-які питання щодо змісту та деталей дослідження, будь ласка, напишіть Олегу Омельченку (o_omelchenko@kse.org.ua).
              </p>
              <p>Дякуємо за зацікавленість дослідженням!</p>
            </div>

            <div className={'text-center'}><Button onClick={this.go_to_tutorial.bind(this)} className={'btn-sm'} variant={"success"}>
              Я погоджуюсь взяти участь в дослідженні.
            </Button></div>
          </div>

        </Row>
      </>
    );
  }
}

export default Intro;
