import { Image } from 'antd'
import NextImage from 'next/image'
import styles from './style.module.css'
import Opreate from '../Opreate'
import { useContext, useState } from 'react'
import { InferResultItem, InferResultRes } from '@/pages/api/base/type'
import { useTranslation } from 'next-i18next'
import AppContext from '@/components/hooks/createContext'
import { taskExecutionStars } from '@/pages/api/base'
import { IS_ONLINE_POWER, CLOUD_PROVIDE } from '@/common/constans/international'

type ItemType = 'star' | 'page'
interface IProps {
    itemType: ItemType
    item: InferResultRes
    itemChange?: (item: InferResultRes) => void
    itemData: InferResultItem
    executionClick?: (executeSeq: number, pageNumber: number) => void
    previewIndexChange?: () => void
}

const InferItem = ({
    itemType,
    item,
    itemChange,
    itemData,
    executionClick,
    previewIndexChange,
}: IProps) => {
    const { t } = useTranslation('studio')

    const [showHover, setHover] = useState<string | null>(null)
    const [hold, setHold] = useState<string | null>(null)

    const {
        taskId: [taskId],
        inferStarList: [, setInferStarList],
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    } = useContext(AppContext)!

    const getStartList = async () => {
        const value = await taskExecutionStars({ taskId })
        setInferStarList(value ?? [])
    }

    const handleProgress = (value: string) => {
        const progress = parseFloat(value) * 100
        return parseInt(progress + '') + '%'
    }

    return item ? (
        <div>
            <div
                className={styles.image}
                onMouseMove={() => setHover(itemData.id)}
                onMouseLeave={() => setHover(null)}
            >
                {itemData.status === 'Success' && showHover === itemData.id ? (
                    <div className={`ag14 ${styles.imageMask}`} onClick={previewIndexChange}>
                        {t('previewText')}
                    </div>
                ) : null}
                <div className={styles.content}>
                    {itemData.status == 'Pending' ||
                    itemData.status == 'Running' ||
                    itemData.status == 'Failed' ||
                    itemData.blocked ? (
                        <div
                            className={styles.place}
                            style={{
                                backgroundColor:
                                    itemData.status == 'Pending'
                                        ? 'var(--FillColor1)'
                                        : itemData.status == 'Running'
                                        ? 'var(--FillColor6)'
                                        : itemData.status == 'Failed'
                                        ? 'var(--FillColor3)'
                                        : '#333333',
                                color:
                                    itemData.status == 'Pending'
                                        ? 'var(--TextColor2)'
                                        : itemData.status == 'Running'
                                        ? 'var(--TextColor2)'
                                        : itemData.status == 'Failed'
                                        ? 'var(--TextColor3)'
                                        : '#595959',
                            }}
                        >
                            <NextImage
                                className={styles.placeLogo}
                                height={100}
                                width={100}
                                src={
                                    itemData.blocked
                                        ? '/ic_image_logo_blocked.svg'
                                        : '/ic_image_logo.svg'
                                }
                                alt="logo"
                            ></NextImage>
                            <p className={`ag14 ${styles.placeTxt}`}>
                                {itemData.status == 'Pending'
                                    ? t('imageState.pending')
                                    : itemData.status == 'Running'
                                    ? t('imageState.running', {
                                          progress: handleProgress(itemData?.progress || '0'),
                                      })
                                    : itemData.status == 'Failed'
                                    ? IS_ONLINE_POWER
                                        ? t('imageState.failed')
                                        : t('imageState.failedBack')
                                    : t('imageState.blocked')}
                            </p>
                            {itemData.status == 'Running' ? (
                                <p className={`ag12 ${styles.placeBottom}`}>{CLOUD_PROVIDE}</p>
                            ) : null}
                        </div>
                    ) : (
                        <Image
                            src={itemData.previewImage || ''}
                            alt="model_image"
                            width={252}
                            className={styles.imageOne}
                            preview={false}
                            key={itemData.previewImage || itemData.finalImage}
                        ></Image>
                    )}
                    {(showHover === itemData.id &&
                        itemData.status === 'Success' &&
                        !itemData.blocked) ||
                    hold === itemData.id ? (
                        <Opreate
                            executionInfo={{
                                taskId,
                                taskName: item.taskName,
                                executionId: item.executionId,
                                executeSeq: item.executeSeq,
                                agentVersion: item.agentVersion,
                            }}
                            imageInfo={{
                                unitId: itemData.id,
                                image: itemData.finalImage,
                                isStar: itemData.isStar ?? false,
                                index:
                                    itemType === 'star'
                                        ? null
                                        : item.result.findIndex((it) => it.id == itemData.id) + 1,
                                seed: itemData.seed,
                            }}
                            holdChange={setHold}
                            starCallback={getStartList}
                            submittedInfo={
                                itemType === 'star'
                                    ? {
                                          // 这是星标这边的，所以isSubmitted是在res维度的
                                          id: item.id ?? '',
                                          isSubmitted: !!item.isSubmitted,
                                          submittedChange: (it) => {
                                              if (itemChange) {
                                                  itemChange({ ...item, isSubmitted: it })
                                              }
                                          },
                                      }
                                    : undefined
                            }
                        ></Opreate>
                    ) : null}
                </div>
            </div>
            {itemType === 'star' ? (
                <div className={`ag14 ${styles.executeContainer}`}>
                    <div
                        className={styles.executeSeq}
                        onClick={() => {
                            if (executionClick) {
                                executionClick(item?.executeSeq, itemData?.pageNumber || 0)
                            }
                        }}
                    >
                        {t('execution', { executeSeq: item?.executeSeq })}
                    </div>
                </div>
            ) : null}
        </div>
    ) : null
}

export default InferItem
