import * as React from 'react'
import ChartPanel from '../ChartPanel'
import ReactSplitPane from 'react-split-pane'
import Tree from '../Tree/Tree'
import { AppState } from '../../reducers'
import { ChartParameters } from '../../reducers/Charts'
import { connect } from 'react-redux'
import { List } from 'immutable'
import { Sidebar } from '../Sidebar'
import ReactResizeDetector from 'react-resize-detector'

interface Props {
  heightProperty: any
  paneDefaults: any
  connectionId?: string
  chartPanelItems: List<ChartParameters>
}

function ContentView(props: Props) {
  const [height, setHeight] = React.useState<string | number>('100%')
  const [detectedHeight, setDetectedHeight] = React.useState(0)
  const detectSize = React.useCallback((width, newHeight) => {
    setDetectedHeight(newHeight)
  }, [])

  const closeDrawerCompletelyIfItSitsOnTheEdge = React.useCallback(() => {
    if (detectedHeight < 30) {
      setHeight('100%')
    }
  }, [detectedHeight])

  // Open chart panel on start and when a new chart is added but the panel is closed
  React.useEffect(() => {
    const almostClosed = !isNaN(height as any) && detectedHeight < 30
    if ((!height || height === '100%' || almostClosed) && props.chartPanelItems.count() > 0) {
      setHeight('calc(100% - 250px)')
    }

    if (props.chartPanelItems.count() === 0) {
      setHeight('100%')
    }
  }, [props.chartPanelItems])

  return (
    <div className={props.paneDefaults}>
      <ReactSplitPane
        step={10}
        split="horizontal"
        minSize={0}
        size={height}
        defaultSize={'100%'}
        allowResize={true}
        style={{ height: 'calc(100vh - 64px)' }}
        pane1Style={{ maxHeight: '100%' }}
        pane2Style={{ borderTop: '1px solid #999', display: 'flex' }}
        onChange={setHeight}
        onDragFinished={closeDrawerCompletelyIfItSitsOnTheEdge}
      >
        <span>
          <ReactSplitPane
            step={20}
            primary="second"
            className={props.heightProperty}
            split="vertical"
            minSize={250}
            defaultSize={500}
            allowResize={true}
            style={{ height: '100%' }}
            pane1Style={{ overflowX: 'hidden' }}
            resizerStyle={{ height: '100%' }}
          >
            <Tree />
            <div className={props.paneDefaults} style={{ height: '100%', overflowY: 'auto', overflowX: 'hidden' }}>
              <Sidebar connectionId={props.connectionId} />
            </div>
          </ReactSplitPane>
        </span>
        {/** Passing height constraints via flex options down */}
        <div style={{ flex: 1, display: 'flex', height: '100%' }}>
          {/** Resize detector must not be in the scroll zone, it needs to detect actual available size */}
          <ReactResizeDetector handleHeight={true} onResize={detectSize} />
          <ChartPanel />
        </div>
      </ReactSplitPane>
    </div>
  )
}

const mapStateToProps = (state: AppState) => {
  return {
    chartPanelItems: state.charts.get('charts'),
  }
}

export default connect(mapStateToProps)(ContentView)