import React, { memo } from 'react'
import { SvgXml } from 'react-native-svg'
import { isEqual } from 'lodash'

import { StyleSheet } from 'react-native'
import { CellProps } from './TableTypes'

// TODO(michael-adalo): improve this implementation to make it less hacky

const BooleanCell = ({ cell, theme }: CellProps) => {
  if (cell.value === true) {
    return (
      <SvgXml
        xml={`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>`}
        style={styles.icon}
        fill={theme.cellText.color}
      />
    )
  }

  return null
}

const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  },
})

export default memo(BooleanCell, isEqual)