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

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

export const CircleDate: React.FunctionComponent<Props> = ({ day, month, data }) => {
  const { orientation, dateMonthFormat, datePrimaryColor, dateDayFormat } = data.parameters
  const sizeProp = AnniveraryDateUtils.utils(orientation)
  const daySize = (dateDayFormat?.fontSize || 20) * 400 / 100
  const monthSize = (dateMonthFormat?.fontSize || 10) * 400 / 100

  return (
    <svg {...sizeProp} viewBox='0 0 400 400' xmlSpace='preserve'>
      <g>
        <circle fill={datePrimaryColor} cx='200' cy='200' r='200' />
        <foreignObject width='400' height='400'>
          <div style={{ height: 400, width: 400, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
            <FormattedText text={AnniveraryDateUtils.getMonth(month, true)} format={{...dateMonthFormat, fontSize: monthSize}} unit='px' />
            <FormattedText text={AnniveraryDateUtils.getZeroLeadedText(day)} format={{...dateDayFormat, fontSize: daySize}} unit='px' />
          </div>
        </foreignObject>
      </g>
    </svg>
  )
}
