import React from "react"
 import { AnniveraryDateUtils } from "../utils"

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

export const FlatDate: React.FunctionComponent<Props> = ({ month, day, data }: Props) => {
   const { abbreviatedMonths, dateDayFormat, dateMonthFormat, orientation, datePrimaryColor } = data.parameters

  const sizeProp = AnniveraryDateUtils.utils(orientation)
  const monthSize = ((dateMonthFormat?.fontSize ?? 10) * 400) / 100
  const daySize = ((dateDayFormat?.fontSize ?? 20) * 400) / 100

  const getFontFamily = (format: any) => {
    if (format?.font?.filename) return format.font.filename.replace('.', '-')
    return ''
  }

  return (
    <svg {...sizeProp} viewBox='0 0 400 400' xmlSpace='preserve'>
      <g>
        <path fill={datePrimaryColor} d='M349.5,393.5h-299c-24.3,0-44-19.7-44-44v-299c0-24.3,19.7-44,44-44h299c24.3,0,44,19.7,44,44v299C393.5,373.8,373.8,393.5,349.5,393.5z' />
        <path fill='#FFFFFF' d='M349.5,389.5h-299c-22,0-40-18-40-40v-299c0-22,18-40,40-40h299c22,0,40,18,40,40v299C389.5,371.5,371.5,389.5,349.5,389.5z' />
        <path fill={datePrimaryColor} d='M9,99.9V50.5c0-22.2,18.1-40.3,40.3-40.3h301.4c22.2,0,40.3,18.1,40.3,40.3v49.4H9z' />
        <text fontFamily={`"${getFontFamily(dateMonthFormat)}"`}
          textAnchor='middle'
          alignmentBaseline='central' x='200' y='55'
          fontSize={monthSize} preserveAspectRatio='none'
          fill={dateMonthFormat?.fontColor ?? '#fff'} fontSizeAdjust=''>
          {AnniveraryDateUtils.getMonth(month, abbreviatedMonths)}
        </text>

        <text fontFamily={`"${getFontFamily(dateDayFormat)}"`}
          textAnchor='middle'
          alignmentBaseline='central' x='200' y='245'
          fontSize={daySize} preserveAspectRatio='none'
          fill={dateDayFormat?.fontColor ?? '#fff'} fontSizeAdjust=''>
          {AnniveraryDateUtils.getZeroLeadedText(day)}
        </text>
      </g>
    </svg>
  )
}
