import React from 'react'
import PropTypes from 'prop-types'
import { StyleSheet, View } from 'react-native'

import { Colors, Containers } from '../../styles'
import {
  CHART_COLUMN_WIDTH,
  CHART_DOT_RADIUS,
  CHART_GRID_LINE_HORIZONTAL_WIDTH
} from '../../config'

const SymptomCell = ({
  height,
  index,
  symptom,
  symptomValue,
  isSymptomDataComplete
}) => {

  const shouldDrawDot = symptomValue !== false
  const styleCell = index !== 0
    ? [styles.cell, { height, width: CHART_COLUMN_WIDTH }]
    : [styles.cell, { height, width: CHART_COLUMN_WIDTH }, styles.topBorder]
  let styleDot

  if (shouldDrawDot) {
    const styleSymptom = Colors.iconColors[symptom]
    const symptomColor = styleSymptom.shades[symptomValue]
    const isMucusOrCervix = (symptom === 'mucus') || (symptom === 'cervix')
    const backgroundColor = (isMucusOrCervix && !isSymptomDataComplete) ?
      'white' : symptomColor
    const borderWidth = (isMucusOrCervix && !isSymptomDataComplete) ? 2 : 0
    const borderColor = symptomColor
    styleDot = [styles.dot, { backgroundColor, borderColor, borderWidth }]
  }

  return (
    <View style={styleCell} key={symptom}>
      {shouldDrawDot && <View style={styleDot} />}
    </View>
  )
}

SymptomCell.propTypes = {
  height: PropTypes.number,
  index: PropTypes.number.isRequired,
  symptom: PropTypes.string,
  symptomValue: PropTypes.oneOfType([
    PropTypes.bool,
    PropTypes.number,
  ]),
  isSymptomDataComplete: PropTypes.bool,
}

const styles = StyleSheet.create({
  cell: {
    backgroundColor: 'white',
    borderBottomColor: Colors.grey,
    borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
    borderLeftColor: Colors.grey,
    borderLeftWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
    ...Containers.centerItems
  },
  topBorder: {
    borderTopColor: Colors.grey,
    borderTopWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
  },
  dot: {
    width: CHART_DOT_RADIUS * 2,
    height: CHART_DOT_RADIUS * 2,
    borderRadius: 50
  }
})
export default SymptomCell