import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {
  ActivityIndicator,
  Dimensions,
  FlatList,
  PixelRatio,
  StyleSheet,
  View,
} from 'react-native'

import AppLoadingView from '../common/app-loading'
import AppPage from '../common/app-page'
import AppText from '../common/app-text'

import DayColumn from './day-column'
import HorizontalGrid from './horizontal-grid'
import NoData from './no-data'
import Tutorial from './tutorial'
import YAxis from './y-axis'

import { connect } from 'react-redux'
import { navigate } from '../../slices/navigation'

import { getCycleDaysSortedByDate } from '../../db'
import nothingChanged from '../../db/db-unchanged'
import {
  getChartFlag,
  scaleObservable,
  setChartFlag,
} from '../../local-storage'
import { makeColumnInfo, nfpLines } from '../helpers/chart'

import {
  CHART_COLUMN_WIDTH,
  CHART_GRID_LINE_HORIZONTAL_WIDTH,
  CHART_SYMPTOM_HEIGHT_RATIO,
  CHART_XAXIS_HEIGHT_RATIO,
  SYMPTOMS,
} from '../../config'
import { shared } from '../../i18n/en/labels'
import { Colors, Spacing } from '../../styles'

class CycleChart extends Component {
  static propTypes = {
    navigate: PropTypes.func,
    end: PropTypes.bool,
  }

  constructor(props) {
    super(props)

    this.state = {}
    this.cycleDaysSortedByDate = getCycleDaysSortedByDate()
    this.getFhmAndLtlInfo = nfpLines()
    this.shouldShowTemperatureColumn = false

    this.checkShouldShowHint()
    this.prepareSymptomData()
  }

  componentWillUnmount() {
    this.cycleDaysSortedByDate.removeListener(this.handleDbChange)
    this.removeObvListener()
  }

  checkShouldShowHint = async () => {
    const flag = await getChartFlag()
    const shouldShowHint = flag === 'true' ? true : false
    this.setState({ shouldShowHint })
  }

  setShouldShowHint = async () => {
    await setChartFlag()
    this.setState({ shouldShowHint: false })
  }

  onLayout = () => {
    if (this.state.chartHeight) return false

    this.reCalculateChartInfo()
    this.updateListeners(this.reCalculateChartInfo)
  }

  prepareSymptomData = () => {
    this.symptomRowSymptoms = SYMPTOMS.filter((symptomName) => {
      return this.cycleDaysSortedByDate.some((cycleDay) => {
        return symptomName !== 'temperature' && cycleDay[symptomName]
      })
    })
    this.chartSymptoms = [...this.symptomRowSymptoms]
    if (this.cycleDaysSortedByDate.some((day) => day.temperature)) {
      this.chartSymptoms.push('temperature')
      this.shouldShowTemperatureColumn = true
    }
  }

  renderColumn = ({ item, index }) => {
    return (
      <DayColumn
        dateString={item}
        index={index}
        navigate={this.props.navigate}
        symptomHeight={this.symptomHeight}
        columnHeight={this.columnHeight}
        symptomRowSymptoms={this.symptomRowSymptoms}
        chartSymptoms={this.chartSymptoms}
        shouldShowTemperatureColumn={this.shouldShowTemperatureColumn}
        getFhmAndLtlInfo={this.getFhmAndLtlInfo}
        xAxisHeight={this.xAxisHeight}
      />
    )
  }

  reCalculateChartInfo = () => {
    const { width, height } = Dimensions.get('window')

    this.xAxisHeight = height * 0.7 * CHART_XAXIS_HEIGHT_RATIO
    const remainingHeight = height * 0.7 - this.xAxisHeight
    this.symptomHeight = PixelRatio.roundToNearestPixel(
      remainingHeight * CHART_SYMPTOM_HEIGHT_RATIO
    )
    this.symptomRowHeight =
      PixelRatio.roundToNearestPixel(
        this.symptomRowSymptoms.length * this.symptomHeight
      ) + CHART_GRID_LINE_HORIZONTAL_WIDTH
    this.columnHeight = remainingHeight - this.symptomRowHeight
    const chartHeight = this.shouldShowTemperatureColumn
      ? height * 0.7
      : this.symptomRowHeight + this.xAxisHeight
    const numberOfColumnsToRender = Math.round(width / CHART_COLUMN_WIDTH)
    const columns = makeColumnInfo()

    this.setState({ columns, chartHeight, numberOfColumnsToRender })
  }

  updateListeners(dataUpdateHandler) {
    // remove existing listeners
    if (this.handleDbChange) {
      this.cycleDaysSortedByDate.removeListener(this.handleDbChange)
    }
    if (this.removeObvListener) this.removeObvListener()

    this.handleDbChange = (_, changes) => {
      if (nothingChanged(changes)) return
      dataUpdateHandler()
    }

    this.cycleDaysSortedByDate.addListener(this.handleDbChange)
    this.removeObvListener = scaleObservable(dataUpdateHandler, false)
  }

  render() {
    const {
      chartHeight,
      chartLoaded,
      shouldShowHint,
      numberOfColumnsToRender,
    } = this.state
    const hasDataToDisplay = this.chartSymptoms.length > 0

    return (
      <AppPage
        contentContainerStyle={styles.pageContainer}
        onLayout={this.onLayout}
        scrollViewStyle={styles.page}
      >
        {!hasDataToDisplay && <NoData />}
        {hasDataToDisplay && !chartHeight && !chartLoaded && <AppLoadingView />}
        <View style={styles.chartContainer}>
          {shouldShowHint && chartLoaded && (
            <Tutorial onClose={this.setShouldShowHint} />
          )}
          {hasDataToDisplay &&
            chartLoaded &&
            !this.shouldShowTemperatureColumn && (
              <View style={styles.centerItem}>
                <AppText style={styles.warning}>
                  {shared.noTemperatureWarning}
                </AppText>
              </View>
            )}
          {hasDataToDisplay && (
            <View style={styles.chartArea}>
              {chartHeight && chartLoaded && (
                <YAxis
                  height={this.columnHeight}
                  symptomsToDisplay={this.symptomRowSymptoms}
                  symptomsSectionHeight={this.symptomRowHeight}
                  shouldShowTemperatureColumn={this.shouldShowTemperatureColumn}
                  xAxisHeight={this.xAxisHeight}
                />
              )}

              {chartHeight && (
                <FlatList
                  horizontal={true}
                  inverted={true}
                  showsHorizontalScrollIndicator={false}
                  data={this.state.columns}
                  renderItem={this.renderColumn}
                  keyExtractor={(item) => item}
                  initialNumToRender={numberOfColumnsToRender}
                  windowSize={30}
                  onLayout={() => this.setState({ chartLoaded: true })}
                  onEndReached={() => this.setState({ end: true })}
                  ListFooterComponent={<LoadingMoreView end={this.state.end} />}
                  updateCellsBatchingPeriod={800}
                  contentContainerStyle={{ height: chartHeight }}
                />
              )}
              {chartHeight && chartLoaded && (
                <React.Fragment>
                  {this.shouldShowTemperatureColumn && (
                    <HorizontalGrid height={this.columnHeight} />
                  )}
                </React.Fragment>
              )}
            </View>
          )}
        </View>
      </AppPage>
    )
  }
}

function LoadingMoreView({ end }) {
  return (
    <View style={styles.loadingContainer}>
      {!end && <ActivityIndicator size={'large'} color={Colors.orange} />}
    </View>
  )
}

LoadingMoreView.propTypes = {
  end: PropTypes.bool,
}

const styles = StyleSheet.create({
  chartArea: {
    flexDirection: 'row',
  },
  chartContainer: {
    flexDirection: 'column',
  },
  loadingContainer: {
    height: '100%',
    backgroundColor: Colors.turquoiseLight,
    justifyContent: 'center',
  },
  page: {
    marginVertical: Spacing.small,
  },
  pageContainer: {
    paddingHorizontal: Spacing.base,
  },
  warning: {
    padding: Spacing.large,
  },
})

const mapDispatchToProps = (dispatch) => {
  return {
    navigate: (page) => dispatch(navigate(page)),
  }
}

export default connect(null, mapDispatchToProps)(CycleChart)