import React, { useContext } from 'react'
import classnames from 'clsx'
import Head from 'next/head'
import Router from 'next/router'
import { toClipboard } from 'copee'
import { MdContentCopy, MdDownload } from 'react-icons/md'
import toaster from '../toaster'
import ConfigContext from '../../contexts/ConfigContext'
import { checkWebpSupport } from '../../../common/helpers'
import Card from './card'
const getRelativeImageUrl = (format = 'image') => {
const [path, query] = Router.asPath.split('?')
return `${path}/${format}${query ? `?${query}` : ''}`
}
const getImageUrl = (format = 'image') => {
return `${window.location.protocol}//${
window.location.host
}${getRelativeImageUrl(format)}`
}
const copyImageUrl = () => {
const screenshotImageUrl = getImageUrl()
const success = toClipboard(screenshotImageUrl)
if (success) {
toaster.success('Copied image url to clipboard')
} else {
window.open(screenshotImageUrl, '_blank')
}
}
const copyMarkdown = () => {
const screenshotImageUrl = getImageUrl()
const ogTag = ``
const success = toClipboard(ogTag)
if (success) {
toaster.success('Copied markdown to clipboard')
}
}
const copyImageTag = () => {
const screenshotImageUrl = getImageUrl()
const ogTag = `
`
const success = toClipboard(ogTag)
if (success) {
toaster.success('Copied image tag to clipboard')
}
}
const copyOpenGraphTags = () => {
const ogTag = `
`.trim()
const success = toClipboard(ogTag)
if (success) {
toaster.success('Copied open graph tags to clipboard')
}
}
const handleDownload = (fileType: string) => async () => {
toaster.info('Downloading...')
try {
const img = new Image()
img.onload = () => {
const canvas = document.createElement('canvas')
canvas.width = 1280
canvas.height = 640
const context = canvas.getContext('2d')
if (context && img) {
context.drawImage(img, 0, 0, canvas.width, canvas.height)
const dataUrl = canvas.toDataURL(`image/${fileType}`)
const link = document.createElement('a')
link.download = `${Router.query._name}.${fileType}`
link.href = dataUrl
link.click()
}
}
img.src = getRelativeImageUrl()
} catch (error) {
toaster.error('Download failed: Please use a modern browser.')
console.error(error)
}
}
const openRelativeURLInNewTab = (fileType: string) => async () => {
window.open(getRelativeImageUrl(fileType), '_blank')
}
const Preview: React.FC = () => {
const { config } = useContext(ConfigContext)
return (
)
}
export default Preview