import sharp from 'sharp'
import { createSignal } from 'solid-js'
import fs from 'fs'

interface Props {
  src: string
  size?: number
  alt?: string
}

const convertImage = async (props: Props) => {
  const webpOutputPath = `src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.webp`
  const avifOutputPath = `src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.avif`

  if (!fs.existsSync(webpOutputPath) || !fs.existsSync(avifOutputPath)) {
    const webpBuffer = await sharp(`src/assets/images/${props.src}`).webp({ quality: 75 }).resize(props.size).toBuffer()
    await sharp(webpBuffer).toFile(webpOutputPath)

    const avifBuffer = await sharp(`src/assets/images/${props.src}`).avif({ quality: 60 }).resize(props.size).toBuffer()
    await sharp(avifBuffer).toFile(avifOutputPath)
  }
}

export default (props: Props) => {
  let [imageSrc] = createSignal(`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.webp`)
  convertImage(props)

  return (
    <>
      <picture>
        <source srcset={imageSrc().replace(/\.webp$/, '.avif')} type="image/avif" />
        <source srcset={imageSrc()} type="image/webp" />
        <img src={imageSrc()} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
      </picture>
    </>
  )
}