import React from "react";
import styled from "styled-components";
import { Colors } from "apple-colors";
import QUERIES, { getWindowHeight, getWindowWidth, getWindowScrollPosX, getWindowScrollPosY, useScrollBy, useScrollTo } from "responsive-web";

const Wrapper = styled.div`
  height: 300px;
  width: 300px;
  padding: 1.5rem 2rem;
  border-radius: 1rem;
  background: ${Colors.iOS.Light.Grey1};
  @media screen and (${QUERIES.MOBILE}) {
      background: ${Colors.iOS.Light.Grey1};

  }
`;
const Header = styled.h1`
  font-size: 25px;
  color: #fff;
  @media screen and (${QUERIES.MOBILE}) {
      font-size: 18px;
  }
`;
const Paragraph = styled.p`
  font-size: 18px;
  color: #fff;
  @media screen and (${QUERIES.MOBILE}) {
      font-size: 14px;
  }
`;

const MyDeviceQuery = () => {
  const windowWidth = getWindowWidth();
  const windowHeight = getWindowHeight();
  const windowScrollPos = getWindowScrollPos();
  return (
    <Wrapper>
     <Header>Hello World</Header>
     {windowWidth > 550 && <p>Hello! Window width greater than 550px</p>} 
     {windowHeight > 500 && <p>Hello! Window height greater than 500px</p>}
     <p>Scroll amount x: {getWindowScrollX()}</p>
     <p>Scroll amount y: {getWindowScrollY()}</p>
     <Paragraph>
     I am using queries to make my website responsive.
     </Paragraph>
     <button onclick={useScrollBy(20, 50)}>Scroll by</button>
     <button onclick={useScrollTo(0, 50)}>Scroll To</button>
    </Wrapper>
  );
}