import React from 'react';
import styled from 'styled-components';
import Tilt from 'react-tilt';

export const UpperImage = styled.div`
  width: 100%;
  height: 100%;
  background-image: url("https://www.desktopbackground.org/download/1920x1080/2012/04/21/378104_tom-ford-glasses_2560x1440_h.jpg");
  background-repeat: no-repeat;
  background-color: gray;
  background-size: cover;
  background-position: center;
  align-items: center;
  margin-top: -17%;
  align-self: center;
  filter: gray();
  -webkit-filter: grayscale(1) blur(8px);
  opacity: 0.5;
  border-bottom: 2px solid ${({ theme }) => theme.colors.white};
   -webkit-transition: All 1s ease-in-out;
  :hover{
      -webkit-transition: All 1s ease-in-out;
      opacity: 1;
      filter: none;
      -webkit-filter: grayscale(0);
      transform: scale(1.15);
       @include transform(translate(var(--translate-x), var(--translate-y)));
    }
`;
const Title = styled.h1`
  color: ${({ theme }) => theme.colors.white};
  font-weight: ${({ theme }) => theme.font.regular};
  font-size: ${({ isBig }) => (isBig ? '5em' : '2em')};
  font-family: "Open Sans";
  text-align: center;
  width: 450px;
  opacity: 0;
  -webkit-transition: All 1s ease-in-out;
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  margin: auto;
  margin-top: 35vh;
  letter-spacing: .15em;


  ${UpperImage}:hover & {
    opacity: 1;
    animation:
    typing 2.0s steps(30, end),
    blink-caret 1s step-end infinite;

  @keyframes typing {
    from {width: 0} to {width: 25%}
  }
  @keyframes blink-caret {
    from, to {border-color: transparent}
    50% {border-color: orange; }
   }
 }
`;

const StyledSubtitle = styled.h2`
color: ${({ theme }) => theme.colors.white};
  font-weight: ${({ theme }) => theme.font.thin};
  font-size: ${({ isBig }) => (isBig ? '1.5em' : '.5em')};
  font-family: "Open Sans";
  text-decoration: none;
  text-align: center;
  width: 275px;
  opacity: 0;
  -webkit-transition: All 1s ease-in-out;
  white-space: nowrap;
  margin: 0 auto;
  margin-top: 60vh;
  letter-spacing: .15em;
  border: 2px solid orange;
  border-radius: 5px;
  box-shadow: 10px 10px 10px gray;


  ${UpperImage}:hover & {
    opacity: 1;
 };
`;

const UpperHeader = () => (
  <Tilt className="Tilt" options={{ max: 10 }} style={{ height: '100%', width: '100%' }}>
    <UpperImage>
      <Title>XXXXXXXXXXXXXXX</Title>
      <StyledSubtitle isBig>Optyk Okularowy</StyledSubtitle>
    </UpperImage>
  </Tilt>
);

export default UpperHeader;