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

import type { SortArrowProps } from './TableTypes'

const ICON_SIZE = 16

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

const SortIndicatorArrow = ({ direction, theme }: SortArrowProps) => {
  let xml = ''
  if (direction === 'asc') {
    xml = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#000000"><path d="M440-160v-487L216-423l-56-57 320-320 320 320-56 57-224-224v487h-80Z"/></svg>`
  } else if (direction === 'desc') {
    xml = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#000000"><path d="M440-800v487L216-537l-56 57 320 320 320-320-56-57-224 224v-487h-80Z"/></svg>`
  } else {
    throw new Error('Invalid direction')
  }

  const svgXmlProps = {
    xml,
    width: ICON_SIZE,
    height: ICON_SIZE,
    fill: theme.headerText.color,
    style: styles.icon,
  }

  return <SvgXml {...svgXmlProps} />
}

const styles = StyleSheet.create({
  icon: {
    width: ICON_SIZE,
    height: ICON_SIZE,
    marginLeft: 8,
    verticalAlign: 'middle',
  },
})

export default memo(SortIndicatorArrow)