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

import type { PaginationArrowProps } from './TableTypes'

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

const PaginationArrow = ({ direction, theme }: PaginationArrowProps) => {
  if (direction === 'next') {
    return (
      <SvgXml
        xml={`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 10.8333L14.3083 10.8333L11.325 13.825L12.5 15L17.5 10L12.5 5L11.325 6.18333L14.3083 9.16667L2.5 9.16667L2.5 10.8333Z"/></svg>`}
        style={styles.icon}
        fill={theme.cellText.color}
      />
    )
  } else if (direction === 'previous') {
    return (
      <SvgXml
        xml={`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 9.16667H5.69167L8.675 6.175L7.5 5L2.5 10L7.5 15L8.675 13.8167L5.69167 10.8333H17.5V9.16667Z"/></svg>`}
        style={styles.icon}
        fill={theme.cellText.color}
      />
    )
  } else {
    throw new Error('Invalid direction')
  }
}

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

export default memo(PaginationArrow)