/** @jsx jsx */
import { jsx, Button } from 'theme-ui'

import React, { useContext } from 'react'
import { Link } from 'gatsby'

import {
  GlobalDispatchContext,
  GlobalStateContext,
  A,
  Container,
  usePortal,
  ScrollLock,
  globalActions
} from 'gatsby-theme-landmarks-core'

const TRACKING_FLAG = 'allowTracking'
const IconHamburger = props => (
  <div {...props}>
    <svg sx={{ width: '32px', height: '32px' }} viewBox="0 0 24 24">
      <path
        fill="currentColor"
        d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"
      />
    </svg>
  </div>
)

const IconClose = props => (
  <div {...props}>
    <svg sx={{ width: '32px', height: '32px' }} viewBox="0 0 24 24">
      <path
        fill="currentColor"
        d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
      />
    </svg>
  </div>
)

const Logo = props => (
  <div
    sx={{
      position: 'absolute',
      bg: 'dark',
      p: 3,
      width: '142px'
    }}
    {...props}
  >
    <Link to="/">
      <img css={{ display: 'block' }} src={props.src} alt={props.alt} />
    </Link>
  </div>
)

const UpTop = props => (
  <div
    sx={{
      cursor: 'pointer',
      position: 'absolute',
      right: 0,
      top: 0
    }}
    {...props}
  />
)

const Header = props => {
  const { logoSrc, logoAlt } = props
  const state = useContext(GlobalStateContext)
  const dispatch = useContext(GlobalDispatchContext)
  const { openPortal, closePortal, isOpen, Portal } = usePortal()

  return (
    <>
      <Container
        sx={{
          position: ['relative', 'sticky', 'sticky'],
          top: 0,
          zIndex: 3
        }}
      >
        <header
          sx={{
            ml: [3, 4]
          }}
        >
          <Logo src={logoSrc} alt={logoAlt} />
        </header>

        {state.showGDPR && (
          <Portal>
            <div
              sx={{
                backgroundColor: 'lightGrayOpaque',
                py: 3,
                px: 4,
                position: 'fixed',
                bottom: 0,
                left: 0,
                right: 0,
                zIndex: 3
              }}
            >
              <span>
                Acest site folosește cookies pentru a asigura cea mai bună
                experiență de utilizare.{' '}
                <Link
                  sx={{ variant: 'links.default' }}
                  to="/politica-confidentialitate-gdpr"
                >
                  Afla mai multe
                </Link>
              </span>
              <div
                sx={{
                  position: [null, null, 'absolute'],
                  right: 0,
                  top: 2,

                  button: {
                    mb: 0,
                    mr: 3,
                    minWidth: '120px'
                  }
                }}
              >
                <Button
                  variant="primary"
                  onClick={() => {
                    sessionStorage.setItem(TRACKING_FLAG, true)
                    dispatch({
                      type: globalActions.TOGGLE_SHOW_GDPR
                    })
                  }}
                >
                  Accept
                </Button>
                <Button
                  variant="clear"
                  onClick={() =>
                    dispatch({
                      type: globalActions.TOGGLE_SHOW_GDPR
                    })
                  }
                >
                  Mai tarziu
                </Button>
              </div>
            </div>
          </Portal>
        )}

        {isOpen && (
          <Portal>
            <ScrollLock>
              <div
                sx={{
                  position: 'fixed',
                  top: 0,
                  right: 0,
                  bottom: 0,
                  left: 0,
                  background: 'white',
                  zIndex: 3
                }}
              >
                <Container
                  sx={{
                    position: 'relative'
                  }}
                >
                  <Logo src={logoSrc} alt={logoAlt} sx={{ left: [3, 4] }} />
                  <UpTop>
                    <IconClose
                      onClick={closePortal}
                      sx={{
                        float: 'right',
                        p: [3, 4],
                        '&:hover': {
                          color: 'secondary'
                        }
                      }}
                    />
                  </UpTop>
                  <div
                    sx={{
                      pt: '200px',
                      pl: [null, null, 7],
                      display: 'flex',
                      flexDirection: 'column'
                    }}
                  >
                    <a
                      href="tel:+40769444555"
                      sx={{
                        variant: 'links.inYourFace',
                        color: 'secondary'
                      }}
                    >
                      (+4) 0769 444 555
                    </a>
                    <A
                      sx={{ variant: 'links.inYourFace' }}
                      to="/apartamente-noi/etaj-1"
                    >
                      Apartamente disponibile
                    </A>
                    <A
                      sx={{ variant: 'links.inYourFace' }}
                      to="/apartamente-noi"
                    >
                      Modele apartamente
                    </A>
                  </div>
                </Container>
              </div>
            </ScrollLock>
          </Portal>
        )}
      </Container>
      <Container
        sx={{
          position: 'sticky',
          top: 0,
          zIndex: 3
        }}
      >
        <UpTop>
          <IconHamburger
            onClick={openPortal}
            sx={{
              float: 'right',
              p: [3, 4],
              '&:hover': {
                color: 'secondary'
              }
            }}
          />
          <a
            href="tel:+40769444555"
            sx={{
              display: 'block',
              float: 'right',
              pl: [3, 4],
              pt: [3, 4],
              pb: [3, 4],
              textDecoration: 'none',
              color: 'body',
              '&:hover': {
                color: 'secondary'
              }
            }}
          >
            0769 444 555
          </a>
        </UpTop>
      </Container>
    </>
  )
}

export default Header