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

interface Props {
  day: number,
  month: number
}

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


  const { configureState } = useContext(ConfigureContext)
  const { orientation, dateMonthFormat, datePrimaryColor, dateDayFormat } = configureState.parameters
  const sizeProp = AnniveraryDateUtil.utils(orientation)

  let monthSize = (dateMonthFormat && dateMonthFormat.fontSize || 100) * 400 / 100
  let daySize = (dateDayFormat && dateDayFormat.fontSize || 100) * 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 xmlns='http://www.w3.org/1999/xhtml' style={{ height: 400, width: 400, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}> */}
          <div style={{ height: 400, width: 400, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
            <FormattedText text={AnniveraryDateUtil.getMonth(month, true)} format={Object.assign({}, dateMonthFormat, { fontSize: monthSize })} unit='px' />
            <FormattedText text={AnniveraryDateUtil.getZeroLeadedText(day)} format={Object.assign({}, dateDayFormat, { fontSize: daySize })} unit='px' />
          </div>
        </foreignObject>
      </g>
    </svg>
  )
}


CircleDate.propTypes = AnniveraryDateUtil.commonPropTypes()

