interface Props {
  paths: Array<string>
  data: VixonicData
}

export const FontLoader = ({ paths, data }: Props) => {
  const { parameters, downloadsPath } = data

  const _getValueByPath = (path: string, obj: any): any => {
    const pathsArray = path.split('.')
    const propertyName = pathsArray[0]
    if (pathsArray.length === 1) return obj[propertyName]
    else {
      pathsArray.splice(0, 1)
      return _getValueByPath(pathsArray.join('.'), obj[propertyName])
    }
  }

  const fonts = paths.map((path: any) => {
    try {
      const fontParam = _getValueByPath(path, parameters)
      const font = {
        family: fontParam.filename.replace('.', '-'),
        src: `${downloadsPath}/${fontParam.filename}`
      }
      return `
          @font-face {
            font-family: '${font.family}';
            src: url('${font.src}');
          }
        `
    } catch (err) {
      return ''
    }
  })

  return (
    <style>{fonts}</style>
  )
}
