import React, { Component } from 'react'
import { connect } from 'react-redux'
import {
  Link,
} from 'react-router-dom'

import s from './style.scss'

class Menu extends Component {
  constructor(props) {
    super(props)
    this.state = {
      collapsed: true,
    }
  }

  collapsed() {
    const { collapsed } = this.state

    this.setState({
      collapsed: !collapsed,
    })
  }

  render() {
    const { collapsed } = this.state
    let sTop = {}
    let sMid = {}
    let sBot = {}

    if (collapsed) {
      sTop = {
        transformStyle: 'preserve-3d',
        transition: 'transform 250ms',
        transform: 'rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px)',
      }
      sMid = {
        opacity: 1,
      }
      sBot = {
        transformStyle: 'preserve-3d',
        transition: 'transform 250ms',
        transform: 'rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px)',
      }
    } else {
      sTop = {
        transformStyle: 'preserve-3d',
        transition: 'transform 250ms',
        transform: 'rotateX(0deg) rotateY(0deg) rotateZ(45deg) translateX(7.0px) translateY(7.0px) translateZ(0px)',
      }
      sMid = {
        opacity: 0,
      }
      sBot = {
        transformStyle: 'preserve-3d',
        transition: 'transform 250ms',
        transform: 'rotateX(0deg) rotateY(0deg) rotateZ(-45deg) translateX(7.0px) translateY(-7.0px) translateZ(0px)',
      }
    }
    return (
      <div className={collapsed ? s.menu : `${s.menu} ${s.show}`}>
        <div
          className={s.btn}
          role="button"
          tabIndex={0}
          onKeyDown={() => {}}
          onClick={() => this.collapsed()}
        >
          <span
            className={s.top}
            style={sTop}
          />
          <span
            className={s.middle}
            style={sMid}
          />
          <span
            className={s.bottom}
            style={sBot}
          />
        </div>
        <div className={s.logo} />
        <div className={s.nav}>
          <Link
            className={s.analyze}
            to="/auth/analyze"
          >
            舆情分析
          </Link>

          <Link
            className={s.report}
            to="/auth/report"
          >
            事件-报告
          </Link>

          <Link
            className={s.collect}
            to="/auth/collect"
          >
            信息汇总
          </Link>
        </div>
      </div>
    )
  }
}

export default connect()(Menu)