import React, { useState } from 'react'
import { FormattedText } from '../../../../FormattedText'
import { AnniveraryDateUtils } from '../utils'

interface Props {
  day: number
  month: number
  data: VixonicData
}

export const TextCalendarDate: React.FunctionComponent<Props> = ({ day, month, data }: Props) => {
  const { dateMonthFormat, dateDayFormat, abbreviatedMonths, orientation } = data.parameters
  const sizeProp = AnniveraryDateUtils.utils(orientation, '100%')

  const parseFormat = (format: any, defaultSize: any) => {
    return {
      ...format,
      fontSize: format.fontSize || defaultSize
    }
  }

  const [monthFormatState,] = useState(parseFormat(dateMonthFormat, 10))
  const [dayFormatState,] = useState(parseFormat(dateDayFormat, 20))

  return (
    <svg {...sizeProp} viewBox='0 0 100 100'>
      <foreignObject width='100' height='100'>
        <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column', justifyContent: 'center', height: '100%' }}>
          <FormattedText text={AnniveraryDateUtils.getMonth(month, abbreviatedMonths)} format={monthFormatState} unit='px' />
          <FormattedText text={AnniveraryDateUtils.getZeroLeadedText(day)} format={dayFormatState} unit='px' />
        </div>
      </foreignObject>
    </svg>
  )
}
