// @flow
import * as React from 'react'
import { connect } from 'react-redux'
import type { State, Screen } from '../../types'

import { Link } from 'react-router-dom'

import SwipeableDrawer from '@material-ui/core/SwipeableDrawer'
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import ListItemIcon from '@material-ui/core/ListItemIcon'
import ListItemText from '@material-ui/core/ListItemText'
import ListSubheader from '@material-ui/core/ListSubheader'
import Divider from '@material-ui/core/Divider'
import TrendingUpIcon from '@material-ui/icons/TrendingUp'
import SearchIcon from '@material-ui/icons/Search'
import CodeIcon from '@material-ui/icons/Code'
import AuthorIcon from '@material-ui/icons/ThumbUp'

import { toggleDrawer } from '../System/actions'
import { getBookmarks } from '../Bookmarks/selectors'

type Props = {
  open: boolean,
  screens: Screen[],
  toggleDrawer: typeof toggleDrawer,
}

class Drawer extends React.Component<Props> {
  render() {
    const { props } = this
    return (
      <SwipeableDrawer
        open={props.open}
        onClose={props.toggleDrawer}
        onOpen={props.toggleDrawer}
      >
        <div
          tabIndex={0}
          role="button"
          style={{
            width: '300px',
          }}
          onClick={props.toggleDrawer}
          onKeyDown={props.toggleDrawer}
        >
          <List>
            <ListItem button>
              <ListItemIcon>
                <TrendingUpIcon />
              </ListItemIcon>
              <Link to="/">
                <ListItemText>新着</ListItemText>
              </Link>
            </ListItem>

            <ListItem button>
              <ListItemIcon>
                <SearchIcon />
              </ListItemIcon>
              <Link to="/search">
                <ListItemText>検索</ListItemText>
              </Link>
            </ListItem>
            <Divider />
            <ListSubheader>お気に入り</ListSubheader>
            {props.screens.length === 0 && (
              <ListItem button>
                <ListItemText>----</ListItemText>
              </ListItem>
            )}
            {props.screens.map((screen, i) => (
              <ListItem key={i}>
                <Link
                  to={`/?q=${screen.q}&tag=${screen.tag}&page=${screen.page}`}
                >
                  <ListItemText>{screen.label}</ListItemText>
                </Link>
              </ListItem>
            ))}
            <Divider />
            <ListItem button>
              <ListItemIcon>
                <CodeIcon />
              </ListItemIcon>
              <a href="https://github.com/elzup/ssconnect">
                <ListItemText>コード</ListItemText>
              </a>
            </ListItem>
            <ListItem button>
              <ListItemIcon>
                <AuthorIcon />
              </ListItemIcon>
              <a href="https://elzup.com">
                <ListItemText>アプリ開発者</ListItemText>
              </a>
            </ListItem>
          </List>
        </div>
      </SwipeableDrawer>
    )
  }
}

const ms = (state: State) => ({
  open: state.System.drawer.open,
  screens: getBookmarks(state),
})

const conn = connect(
  ms,
  { toggleDrawer: toggleDrawer },
)

export default conn(Drawer)

@@ -949,16 +949,59 @@
 wer,%0A%7D%0A%0A
+const A = p =%3E %3Ca %7B...p%7D%3E%7Bp.children%7D%3C/a%3E%0A%0A
 class Dr
@@ -1468,32 +1468,56 @@
 %3CListItem button
+ component=%7BLink%7D to=%22/%22
 %3E%0A              
@@ -1600,38 +1600,8 @@
 on%3E%0A
-              %3CLink to=%22/%22%3E%0A  
     
@@ -1642,38 +1642,16 @@
 emText%3E%0A
-              %3C/Link%3E%0A
         
@@ -1687,32 +1687,62 @@
 %3CListItem button
+ component=%7BLink%7D to=%22/search%22
 %3E%0A              
@@ -1821,44 +1821,8 @@
 on%3E%0A
-              %3CLink to=%22/search%22%3E%0A  
     
@@ -1863,38 +1863,16 @@
 emText%3E%0A
-              %3C/Link%3E%0A
         
@@ -2020,39 +2020,32 @@
        %3CListItem
- button
 %3E%0A              
@@ -2063,17 +2063,16 @@
 Text%3E---
--
 %3C/ListIt
@@ -2489,32 +2489,24 @@
    %3CListItem
- button%3E
 %0A           
@@ -2504,38 +2504,30 @@
             
-%3CListItemIc
+butt
 on
-%3E
 %0A           
@@ -2533,52 +2533,21 @@
     
-  %3CCodeIcon /%3E%0A              %3C/ListItemIcon%3E
+component=%7BA%7D
 %0A   
@@ -2549,35 +2549,32 @@
 %7D%0A              
-%3Ca 
 href=%22https://gi
@@ -2598,20 +2598,31 @@
 connect%22
-%3E
 %0A  
+          %3E%0A
         
@@ -2640,16 +2640,57 @@
 Item
-Text%3E%E3%82%B3%E3%83%BC%E3%83%89
+Icon%3E%0A                %3CCodeIcon /%3E%0A              
 %3C/Li
@@ -2687,36 +2687,36 @@
       %3C/ListItem
-Text
+Icon
 %3E%0A              
@@ -2708,34 +2708,62 @@
 %0A              %3C
-/a
+ListItemText%3E%E3%82%B3%E3%83%BC%E3%83%89%3C/ListItemText
 %3E%0A            %3C/
@@ -2800,16 +2800,55 @@
 m button
+ component=%7BA%7D href=%22https://elzup.com%22
 %3E%0A      
@@ -2935,53 +2935,8 @@
 on%3E%0A
-              %3Ca href=%22https://elzup.com%22%3E%0A  
     
@@ -2985,27 +2985,8 @@
 xt%3E%0A
-              %3C/a%3E%0A
     

Fix drawer link size