import React from 'react'
import { inject, observer } from 'mobx-react'
import { blue, red } from 'material-ui/colors'
import Icon from './Icon'

const indicatorWidth = '2px'
const tabStyle = {
  display: 'flex',
  alignItems: 'center',
  whiteSpace: 'nowrap',
  marginLeft: indicatorWidth,
  borderLeft: `${indicatorWidth} transparent solid`,
  boxShadow: `-${indicatorWidth} 0px white`
}
const highlightStyle = {
  backgroundColor: blue[100],
  boxShadow: `-${indicatorWidth} 0px ${blue[100]}`
}
const focusedStyle = {
  borderLeft: `${indicatorWidth} ${red[500]} solid`
}
const notMatchStyle = {
  opacity: 0.3
}

@inject('searchStore')
@inject('tabStore')
@observer
export default class Tab extends React.Component {
  state = { hover: false }

  onMouseEnter = () => this.setState({ hover: true })

  onMouseLeave = () => this.setState({ hover: false })

  onClick = () => {
    this.props.searchStore.focus(this.props)
    this.props.tabStore.activate(this.props)
  }

  getStyle = () => {
    const {
      id,
      tabStore: { selection },
      searchStore: { query, matchedSet, focusedTab }
    } = this.props
    const styles = [ tabStyle ]
    if (selection.has(id)) {
      styles.push(highlightStyle)
    }
    if (focusedTab === id) {
      styles.push(focusedStyle)
    }
    if (Boolean(query) && !matchedSet.has(id)) {
      styles.push(notMatchStyle)
    }
    return Object.assign({}, ...styles)
  }

  getUrlStyle = () => {
    const { id, searchStore: { query, matchedSet, focusedTab } } = this.props
    const urlStyle = {
      opacity: 0.3,
      fontSize: '0.7rem'
    }
    if (Boolean(query) && !matchedSet.has(id)) {
      return urlStyle
    }
    if (this.state.hover || (id === focusedTab)) {
      urlStyle.opacity = 1
    }
    return urlStyle
  }

  componentDidUpdate () {
    const {
      faked, id, searchStore: { focusedTab, searchTriggered, scrolled }
    } = this.props
    if (!faked && id === focusedTab) {
      const containmentRect = this.props.containment().getBoundingClientRect()
      const { top, bottom } = this.node.getBoundingClientRect()
      const topGap = top - containmentRect.top
      const bottomGap = containmentRect.bottom - bottom
      if (topGap > 0 && bottomGap > 0) {
        return
      }
      const scrollOption = {
        block: 'end',
        inline: 'start',
        behavior: 'smooth'
      }
      if (searchTriggered) {
        scrollOption.behavior = 'auto'
        scrolled()
      }
      this.node.scrollIntoView(scrollOption)
    }
  }

  render () {
    const { title, url, pinned } = this.props
    const style = this.getStyle()
    const pin = pinned && (
      <div style={{
        position: 'absolute',
        right: '1rem'
      }}>
        📌
      </div>
    )
    return (
      <div ref={(node) => { this.node = node }}
        onMouseEnter={this.onMouseEnter}
        onMouseLeave={this.onMouseLeave}
        style={style}>
        <Icon {...this.props} />
        <div
          onClick={this.onClick}
          style={{
            overflow: 'hidden',
            textAlign: 'left',
            textOverflow: 'ellipsis'
          }}>
          {title}
          <div style={this.getUrlStyle()}>
            {url}
          </div>
        </div>
        {pin}
      </div>
    )
  }
}

@@ -230,16 +230,51 @@
 enter',%0A
+  justifyContent: 'space-between',%0A
   whiteS
@@ -2707,45 +2707,19 @@
    p
-osition: 'absolute',%0A        right
+adding
 : '
+0 
 1rem
@@ -2925,16 +2925,60 @@
 style%7D%3E%0A
+        %3Cdiv style=%7B%7B display: 'flex' %7D%7D%3E%0A  
         
@@ -3014,13 +3014,17 @@
     
+  
 %3Cdiv%0A
+  
     
@@ -3058,24 +3058,26 @@
 %7D%0A          
+  
 style=%7B%7B%0A   
@@ -3065,32 +3065,34 @@
        style=%7B%7B%0A
+  
             over
@@ -3115,24 +3115,26 @@
             
+ 
+ 
 textAlign: '
@@ -3136,24 +3136,26 @@
 gn: 'left',%0A
+  
             
@@ -3179,16 +3179,18 @@
 lipsis'%0A
+  
         
@@ -3209,16 +3209,18 @@
     
+  
 %7Btitle%7D%0A
     
@@ -3215,16 +3215,18 @@
 %7Btitle%7D%0A
+  
         
@@ -3276,14 +3276,35 @@
     
+ 
+ 
 %7Burl%7D%0A
+            %3C/div%3E%0A
     

Fix pin icon become fixed issue