/**
 * Instruction to rotate the phone to landscape
 */

import React, { Component } from 'react'

import './landscape.warning.css'

import { isMobile, isiPhone } from 'app/utils'
import { LastMuseumLogoNoBlur } from '../icons'

const PhoneIcon = (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="phone-icon">
    <path d="M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z"/>
  </svg>
)

const RotateIcon = (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="rotate-icon">
    <path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/>
  </svg>
)

export default class LandscapeWarning extends Component {
  state = {
    landscape: !isMobile || window.innerWidth > window.innerHeight,
  }

  constructor(props) {
    super(props)
    this.handleResize = this.handleResize.bind(this)
    if (isMobile) {
      window.addEventListener("resize", this.handleResize)
      setTimeout(this.handleResize, 100)
    }
  }

  handleResize() {
    const landscape = !isMobile || window.innerWidth > window.innerHeight
    if (landscape !== this.state.landscape) {
      this.setState({ landscape })
    }
  }

  render() {
    const { landscape } = this.state
    if (landscape) return null
    return (
      <div className="landscape-warning">
        {RotateIcon}
        {PhoneIcon}
        {LastMuseumLogoNoBlur}
        {isiPhone && <div className="landscape-message">{'Please tap '}<small>A</small>{'A and Hide Toolbar'}{ToolbarSymbol}<br/>{'then rotate your device.'}</div>}
        {!isiPhone && <div className="landscape-message">{'Please rotate your device'}</div>}
      </div>
    )
  }
}

const ToolbarSymbol = (
  <img
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAkCAMAAADM4ogkAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA81BMVEX/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3////VdBauAAAAT3RSTlMAI7z14jOM9vnH1eTy/vA8jgIOEQP4mqYE1pixB+UBo7kI8666Bra7CQ+3Erjf77AshDf8r/qQkzgF8b0WtBSyq6Hnlteoi8icj0DjxpE1VSRjywAAAAFiS0dEUONuTLwAAAAHdElNRQflBB4UJQFLwE0gAAABKUlEQVQ4y7XUbTPDQBAH8JVQWg3SBqERPdomaGlpkVL1/FTs9/82/kkwedPbGGPf3M7cb5LZu9sl+peYMUz+jtk5DTQ4EwUNnMf+QrG0WLaYl5Y1MPnSChK7UnVIC1ch12yxGOZiAXLdleEGbULWPBFukb8NWVcS3CFydiEbSoCMYpstrEEowD0s3r4ksX8Qr14bmaGRHT5Mz1nVIY+mw27v+CtTDeYT+eARYX9wmsch/Jzud/ps0Fd5nGtlbvO8150uazildvpCoiF3NLVfQLYSeYmMBDlqIrvSw1SOI/xagBTGrXntJJ1Hsrzx6VaCpEaQd3QvQooeIB+fZEj2MyedrDNutYLX5r8ks0HjXofMVnlSeosng6mB79mxFWjgx+SHmYEO/iE+AdeHRiu0e9zXAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTA0LTMwVDE4OjM3OjExKzAyOjAw3aDYlgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wNC0zMFQxODozNzowMSswMjowMGBXYLQAAAAASUVORK5CYII="
    style={{ width: '14px', height: '14px', marginLeft: '4px', }}
  />
)