import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom"; 

const Start = (props) => {
  const history = useNavigate();
  const kek = './circle.html';

  function hideAddressBar() {
    if (document.documentElement.scrollHeight < window.outerHeight / window.devicePixelRatio)
      document.documentElement.style.height = (window.outerHeight / window.devicePixelRatio) + 'px';
    setTimeout(window.scrollTo(1, 1), 0);
  }

  window.addEventListener("load", function () { hideAddressBar(); });
  window.addEventListener("orientationchange", function () { hideAddressBar(); });

  const handleButtonClick = () => {
    history('/city');
  };

  useEffect(() => {
    const frame = document.querySelector("#start");
    frame.addEventListener('load', () => {
      frame.contentWindow.addEventListener('click', () => {
        handleButtonClick();
      });
    });

    return () => {
      frame.removeEventListener('load', () => {
        frame.contentWindow.removeEventListener('click', () => {
        });
      });
    };
  }, []);

  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      alignContent: 'center',
      alignItems: 'center',
      flexWrap: 'wrap',
      justifyContent: 'space-evenly',
      height: '95vh',
      overflow: 'hidden',
    }}>
      <div style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
      }}>
        <img src="./logo192.png" alt="logo" style={{ width: '181px', height: '181px' }} />
        <span style={{
          color: '#F68C43',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'start',
          fontWeight: 700,
          fontFamily: 'Raleway',
          fontSize: '40px',
        }}>Путешествия <p style={{ color: '#4EB0F2' }}>Просто!</p></span>
      </div>
      <iframe id="start" scrolling="no" src={kek} style={{
        overflow: 'hidden',
        border: 'none',
        width: '440px',
        height: '440px',
      }}></iframe>
    </div>
  )
};

export default Start;