const sendBackgroundMessage = (data: any): Promise<any> => {
  return new Promise((resolve) => {
    chrome.runtime.sendMessage(data, resolve)
  })
}

// const identify = async (
//   data: string,
//   x: number,
//   y: number,
//   width: number,
//   height: number,
//   videoId: string,
//   t: number,
//   q: string
// ): Promise<string> => {
//   const result = await sendBackgroundMessage({
//     type: 'search',
//     data,
//     x,
//     y,
//     width,
//     height,
//     videoId,
//     t,
//   })

//   return new Promise(async (resolve, reject) => {
//     const { error, answer } = result

//     if (error) {
//       reject(error)
//     } else {
//       resolve(answer)
//     }
//   })
// }

// const shop = async (
//   x: number,
//   y: number,
//   width: number,
//   height: number,
//   videoId: string,
//   t: number
// ) => {
//   const data = await getVideoImageDataUrl()

//   const answer = await identify(
//     data,
//     x,
//     y,
//     width,
//     height,
//     videoId,
//     t,
//     'what is this product?'
//   )

//   if (answer) {
//     const shoppingUrl = `https://www.amazon.com/s?k=${answer}`

//     window.open(shoppingUrl)
//   }
// }

// const search = async (
//   x: number,
//   y: number,
//   width: number,
//   height: number,
//   videoId: string,
//   t: number
// ) => {
//   const data = await getVideoImageDataUrl()

//   const answer = await identify(
//     data,
//     x,
//     y,
//     width,
//     height,
//     videoId,
//     t,
//     'what is this?'
//   )

//   if (answer) {
//     alert(answer)
//   }
// }

// const getImageOverlayImageData = (): Promise<ImageData> => {
//   return new Promise((resolve) => {
//     const onLoad = () => {
//       canvasCtx.drawImage(imageOverlay, 0, 0)

//       const imageData = canvasCtx.getImageData(
//         0,
//         0,
//         imageOverlay.width,
//         imageOverlay.height
//       )

//       resolve(imageData)
//     }

//     imageOverlay.onload = onLoad

//     if (imageOverlay.complete) {
//       onLoad()
//     }
//   })
// }

// const getVideoOverlayImageData = async (): Promise<ImageData> => {
//   canvasCtx.drawImage(videoOverlay, 0, 0)

//   const imageData = canvasCtx.getImageData(
//     0,
//     0,
//     imageOverlay.width,
//     imageOverlay.height
//   )

//   return imageData
// }

// const getMaskedVideoDataUrl = async (maskImageData: ImageData) => {
//   const imageData = await getVideoImageData()

//   const maskedImageData = applyMask(imageData, maskImageData)

//   canvasCtx.putImageData(maskedImageData, 0, 0)

//   const maskedDataUrl = canvasOverlay.toDataURL('image/jpeg')

//   return maskedDataUrl
// }

// const save = async (
//   x: number,
//   y: number,
//   width: number,
//   height: number,
//   videoId: string,
//   t: number
// ) => {
//   const data = await getVideoImageDataUrl()

//   const result = await sendBackgroundMessage({
//     type: 'select',
//     data,
//     x,
//     y,
//     width,
//     height,
//     videoId,
//     t,
//   })

//   const { error, masks, message } = result

//   const maskDataUrl = `data:image/png;base64,${masks}`

//   imageOverlay.src = maskDataUrl

//   const maskImageData = await getVideoOverlayImageData()

//   const maskedDataUrl = await getMaskedVideoDataUrl(maskImageData)

//   downloadURL('download.jpg', maskedDataUrl)
// }

// const select = async (
//   x: number,
//   y: number,
//   width: number,
//   height: number,
//   videoId: string,
//   t: number
// ) => {
//   const data = await getVideoImageDataUrl()

//   const result = await sendBackgroundMessage({
//     type: 'select',
//     data,
//     x,
//     y,
//     width,
//     height,
//     videoId,
//     t,
//   })

//   const { error, masks, message } = result

//   const maskDataUrl = `data:image/png;base64,${masks}`

//   downloadURL('download.jpg', data)

//   imageOverlay.src = maskDataUrl

//   const maskImageData = await getImageOverlayImageData()

//   const maskedDataUrl = await getMaskedVideoDataUrl(maskImageData)

//   // downloadURL('download.jpg', maskedDataUrl)
// }

// const getVideoImageDataUrl = (): Promise<string> => {
//   return new Promise((resolve) => {
//     const videoBox = video.getBoundingClientRect()

//     canvasCtx.drawImage(video, 0, 0, videoBox.width, videoBox.height)

//     resolve(canvasOverlay.toDataURL('image/jpeg'))
//   })
// }

// const getVideoImageData = (): Promise<ImageData> => {
//   return new Promise((resolve) => {
//     const videoBox = video.getBoundingClientRect()

//     canvasCtx.drawImage(video, 0, 0, videoBox.width, videoBox.height)

//     const imageData = canvasCtx.getImageData(
//       0,
//       0,
//       videoBox.width,
//       videoBox.height
//     )

//     resolve(imageData)
//   })
// }