import styles from './style.module.css'
import ShowTemplate from '@/components/ImageList/components/ShowTemplate'
import Image from 'next/image'
import { useTranslation } from 'react-i18next'
import { IshowCaseDeatil } from '@/pages/api/base/type'
import { commonCopyText } from '@/common/utils'

interface Iporps {
    showCaseInfo: IshowCaseDeatil
}

const DetailPrompt = ({ showCaseInfo }: Iporps) => {
    const { t } = useTranslation(['studio', 'common'])
    const type_menu = {
        textDescription: t('studio:paramType.textDescription'),
        template: t('studio:paramType.template'),
        prompt: t('studio:paramType.prompt'),
        replicate: t('studio:paramType.replicate'),
        Image2Image: t('studio:paramType.prompt'),
        Text2Image: t('studio:paramType.prompt'),
    }

    const copyText = () => {
        let value = ''

        if (showCaseInfo.textDescription) {
            value = showCaseInfo.textDescription
        } else {
            value = showCaseInfo.posPrompt || ''
            if (showCaseInfo.negPrompt)
                value = value + ' --n ' + showCaseInfo.negPrompt
        }
        commonCopyText(value, {}, t('common:toast.copySuccess'))
    }

    return (
        <div className={`ag16 ${styles.showPrompt}`}>
            <div className={styles.promptDetail}>
                <div className={`ag18 ${styles.title}`}>
                    <span>{type_menu[showCaseInfo?.paramType || 'textDescription']}</span>
                    {showCaseInfo?.paramType !== 'template' ? (
                        <div className={`ag12 ${styles.copy}`} onClick={copyText}>
                            <Image
                                src="/copy.svg"
                                width={12}
                                height={12}
                                alt="copy-icon"
                                className={styles.copyIcon}
                            ></Image>
                            <span>{t('studio:copy')}</span>
                        </div>
                    ) : null}
                </div>

                {showCaseInfo?.posPrompt || showCaseInfo?.textDescription ? (
                    <div className={`ag16 ${styles.posPrompt}`}>
                        <span>{showCaseInfo.posPrompt}</span>
                        {showCaseInfo.negPrompt ? (
                            <>
                                <span className={styles.dividing}> --n </span>
                                <span>{showCaseInfo.negPrompt}</span>
                            </>
                        ) : (
                            <span> </span>
                        )}
                        <span>{showCaseInfo.textDescription}</span>
                    </div>
                ) : (
                    <div className={styles.showTemplate}>
                        <ShowTemplate item={showCaseInfo}></ShowTemplate>
                    </div>
                )}
            </div>
        </div>
    )
}

export default DetailPrompt
