import Image from 'next/image'
import styles from './style.module.css'
import { useState } from 'react'
import { useTranslation } from 'next-i18next'
import { shopifyUploadImage } from '@/pages/api/base'
import Toast from '@/components/Toast'

interface IProps {
    imageUrl: string
    getFileName: () => Promise<string>
}

const ShopifySend = ({ imageUrl, getFileName }: IProps) => {
    const { t } = useTranslation('studio')

    const [loading, setLoading] = useState(false)

    const shareToShopify = async () => {
        if (loading) {
            return
        }
        setLoading(true)
        const fileName = await getFileName()
        const data = {
            imgUrl: imageUrl,
            imgName: fileName,
        }
        const result = await shopifyUploadImage(data)
        if (result) {
            Toast({ message: t('shopifyShareSuccess'), type: 'success' })
        }
        setLoading(false)
    }

    return (
        <div
            className={styles.sendItem}
            onClick={() => {
                shareToShopify()
            }}
        >
            <Image width={48} height={48} src={'/ic_send_shopify.svg'} alt={'shopify'}></Image>
            <div className={`ag12 ${styles.sendLabel}`}>Shopify</div>
        </div>
    )
}

export default ShopifySend
