// @flow
import * as React from 'react'
import * as Styles from '../styles'
import Box from './box'
import Toast from './toast'
import Text from './text'
import {type Props} from './with-tooltip'

type State = {
  mouseIn: boolean,
}

class WithTooltip extends React.Component<Props, State> {
  state = {
    mouseIn: false,
  }
  _attachmentRef: ?React.Component<any> = null
  _onMouseEnter = () => {
    this.setState({mouseIn: true})
  }
  _onMouseLeave = () => {
    this.setState({mouseIn: false})
  }
  _setAttachmentRef = attachmentRef => (this._attachmentRef = attachmentRef)
  render() {
    return (
      <>
        <Box
          style={this.props.containerStyle}
          ref={this._setAttachmentRef}
          onMouseEnter={this._onMouseEnter}
          onMouseLeave={this._onMouseLeave}
          className={this.props.className}
        >
          {this.props.children}
        </Box>
        <Toast
          containerStyle={Styles.collapseStyles([
            styles.container,
            this.props.multiline && styles.containerMultiline,
          ])}
          visible={!!this.props.text && this.state.mouseIn}
          attachTo={() => this._attachmentRef}
          position={this.props.position || 'top center'}
        >
          <Text type="BodySmall" style={Styles.collapseStyles([styles.text, this.props.textStyle])}>
            {this.props.text}
          </Text>
        </Toast>
      </>
    )
  }
}

const styles = Styles.styleSheetCreate({
  container: {
    borderRadius: Styles.borderRadius,
  },
  containerMultiline: {
    width: 320,
    minWidth: 320,
    maxWidth: 320,
  },
  text: Styles.platformStyles({
    isElectron: {
      color: Styles.globalColors.white,
      textAlign: 'center',
      wordBreak: 'break-all',
    },
  }),
})

export default WithTooltip

@@ -225,16 +225,36 @@
 oolean,%0A
+  visible: boolean,%0A
 %7D%0A%0Aclass
@@ -338,16 +338,36 @@
  false,%0A
+    visible: false,%0A
   %7D%0A  _a
@@ -523,24 +523,40 @@
 te(%7BmouseIn:
+ false, visible:
  false%7D)%0A  %7D
@@ -633,16 +633,541 @@
 entRef)%0A
+  componentDidUpdate(prevProps: Props, prevState: State) %7B%0A    if (!prevState.mouseIn && this.state.mouseIn) %7B%0A      // Set visible after Toast is mounted, to trigger transition on opacity.%0A      // Note that we aren't doing anything to make ease out work. We don't%0A      // keep Toast mounted all the time (which would make this unnecessary)%0A      // because in that case the position of the overlay can be messed up when%0A      // not visible, causing ghost unclickable areas.%0A      this.setState(%7Bvisible: true%7D)%0A    %7D%0A  %7D%0A
   render
@@ -1477,16 +1477,51 @@
  %3C/Box%3E%0A
+        %7Bthis.state.mouseIn && (%0A  
         
@@ -1527,16 +1527,18 @@
  %3CToast%0A
+  
         
@@ -1579,16 +1579,18 @@
 tyles(%5B%0A
+  
         
@@ -1619,24 +1619,26 @@
             
+  
 this.props.m
@@ -1676,16 +1676,18 @@
 tiline,%0A
+  
         
@@ -1698,24 +1698,26 @@
 %7D%0A          
+  
 visible=%7B!!t
@@ -1749,17 +1749,19 @@
 ate.
-mouseIn%7D%0A
+visible%7D%0A  
     
@@ -1795,32 +1795,34 @@
 _attachmentRef%7D%0A
+  
           positi
@@ -1862,32 +1862,34 @@
 enter'%7D%0A        
+  
 %3E%0A          %3CTex
@@ -1884,16 +1884,18 @@
         
+ 
+ 
 %3CText ty
@@ -1981,32 +1981,34 @@
 )%7D%3E%0A            
+  
 %7Bthis.props.text
@@ -2019,16 +2019,18 @@
         
+  
 %3C/Text%3E%0A
@@ -2037,16 +2037,18 @@
         
+ 
+ 
 %3C/Toast%3E
@@ -2048,16 +2048,27 @@
 /Toast%3E%0A
+        )%7D%0A
       %3C/

fix clickable area on screens with tooltips (#14242)