import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'

import { PortableText } from '@portabletext/react'
// import imageUrlBuilder from '@sanity/image-url'
import getYouTubeId from 'get-youtube-id'
import { urlForImage } from 'lib/sanity.image'
import Image from 'next/image'
import Link from 'next/link'
import React from 'react'
import LiteYouTubeEmbed from 'react-lite-youtube-embed'

import styles from './PostBody.module.css'

export default function PageBody({ content }) {
  //Video
  const youTubeComponent = ({ value, isInline }) => {
    const { youtubelabel, url } = value
    if (!value.url) {
      ;<>Missing YouTube URL!</>
    }
    const id = getYouTubeId(value.url)
    return (
      <div>
        <LiteYouTubeEmbed id={id} title={value.title} />
      </div>
    )
  }

  //CTA
  const CallToActionComponent = ({ value, isInline }) => {
    return (
      <Link href={value.url}>
        <button className="text-stone-800 mx-1 rounded border border-yellow-600 bg-white px-4 py-2 text-base font-light duration-150 ease-in hover:border-yellow-500 hover:bg-yellow-500 hover:text-white">
          {value.linkText}
        </button>
      </Link>
    )
  }

  //FIGURE/PHOTO/IMAGES

  interface figureComponentProps {
    image: any
    priority?: boolean
    title: string
  }

  const figureComponent = ({ value, isInline }) => {
    //const { altText, image: source, priority } = props
    //console.log(value)
    //console.log(value.asset._ref)
    // console.log(value.altText)

    // const image = value?.asset?._ref ? (
    //   <div>
    //     <img src={value.asset._ref}></img>
    //   </div>
    // ) : (
    //   <div>.......</div>
    // )

    return (
      <div>
        <Image
          //src={urlForImage(value.asset._ref).url()}
          width={1280}
          height={1280}
          src={urlForImage(value.asset._ref).height(1280).width(1280).url()}
          alt={value.altText}
        />
      </div>
    )
  }

  // const figureComponent = ({ value, isInline, props: figureComponentProps }) => {
  //   const { width, height } = getImageDimensions(value)

  //   const { image: source, priority } = props
  //   const image = source?.asset?._ref ?
  // }

  const components = {
    types: {
      callToAction: CallToActionComponent,
      youtube: youTubeComponent,
      Image: figureComponent,
    },
  }

  return (
    <div className={`mx-0 pb-10 font-light ${styles.portableText} `}>
      {/* <PortableText value={content} /> */}
      <PortableText value={content} components={components} />
    </div>
  )
}