import React, {Component} from 'react'
import {MdClose} from 'react-icons/lib/md'
import styled from 'styled-components'
import auto_bind from 'common/auto_bind'
import {card, link, ease} from 'common/styles'

export default class SidePanel extends Component {
  constructor(props) {
    super(props)
    this.state = {
      open: false,
    }
    auto_bind(this)
  }

  open() {
    this.setState({open: true})
  }

  close() {
    this.setState({open: false})
  }

  render() {
    const {children, title} = this.props
    return (
      <Container open={this.state.open}>
        <Header>
          <Title>
            {title}
          </Title>
          <Close onClick={this.close}>
            <MdClose />
          </Close>
        </Header>
        <Content>
          {children}
        </Content>
      </Container>
    )
  }
}

const width = 380

const Container = styled.div`
  z-index: 1;
  ${card}
  padding-bottom: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  width: ${width}px;
  left: 0;
  transform: translate(-${({open}) => open ? 0 : width}px, 0);
  display: flex;
  align-items: stretch;
  flex-direction: column;
  transition: transform 400ms ${ease};
`
const Header = styled.div`
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
`
const Title = styled.div``
const Close = styled.div`
  ${link}
  font-size: 20px;
  padding: 10px;
`
const Content = styled.div`
  flex: 1;
  overflow: scroll;
`