import React, { useEffect } from 'react'
import styled, { withTheme } from 'styled-components'
import { Menu as MenuIcon } from '@material-ui/icons'
import { Button as MaterialButton } from '@material-ui/core'

import { createEvent, createStore } from 'effector'
import { useStore } from 'effector-react'


const Menu = styled.div`
  z-index: 1001;
  width: 300px;
  height: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
  transition: left 0.4s ease;
  left: ${prop => prop.isOpen ? '0' : '-300px'};
  background: linear-gradient(rgba(30, 33, 80, 0.66) 0%, rgba(30, 33, 58, 0.66) 14%, rgba(30, 35, 65, 0.66) 28%, rgba(21, 53, 105, 0.66) 78%, rgba(19, 58, 116, 0.66) 100%);
`

const Title = styled.h1`
  font-size: 14pt;
  min-height: 4rem;
  padding: 0.5rem 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
`

const Button = styled(MaterialButton)`
  left: calc(100% + 1rem);
  z-index: 1002;
  position: absolute;
  top: 20px;
  background: #0089ff;
  border: none;
  color: white;
  border-radius: 3px;
  min-width: 16px;
`

const menuToggle = createEvent('menu open')

const menuOpened = createStore(true)
  .on(menuToggle, state => state ? false : true)

export const MainMenu = (props) => {

  const isOpen = useStore(menuOpened)

  console.log(props)

  useEffect(() => {
    console.log('change', isOpen)
    return () => {
      console.log('change 2', isOpen)
    }
  })

  return (
    <Menu isOpen={isOpen}>
      <Title>
        Ministry of Transport<br/>Republic of Latvia β
      </Title>
        <Button
          onClick={menuToggle}
        >
          <MenuIcon/>
        </Button>
    </Menu>
  )
}