import React, { useContext, useState } from 'react'
import { ConfigureContext } from '../../../../../contex/configureContext/ConfigureContext'
import { FormattedText } from '../../../../FormattedText'
import { AnniveraryDateUtil } from '../DateUtils'

interface Props {
  day: number
  month: number
}

export const TextCalendarDate = ({ day, month }: Props) => {


  const { configureState } = useContext(ConfigureContext)
  const { dateMonthFormat, dateDayFormat, abbreviatedMonths,orientation  } = configureState.parameters


  const sizeProp = AnniveraryDateUtil.utils(orientation, '100%')


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

  const [monthFormatState,] = useState(parseFormat(dateMonthFormat, 20))
  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={AnniveraryDateUtil.getMonth(month, abbreviatedMonths)} format={monthFormatState} unit='px' />
          <FormattedText text={AnniveraryDateUtil.getZeroLeadedText(day)} format={dayFormatState} unit='px' />
        </div>
      </foreignObject>
    </svg>
  )
}


TextCalendarDate.propTypes = AnniveraryDateUtil.commonPropTypes()

