import styles from './style.module.css'
import { useContext, useEffect, useState } from 'react'
import AppContext from '@/components/hooks/createContext'
import { useTranslation } from 'next-i18next'
import Example from './Example'
import PromptInput from './PromptInput'
// import {AutoComplete} from 'antd'
// import {getPromptSuggestion} from "@/pages/api/base";

interface Iporps {
    isNotShowExplain?: boolean
}

const KEY_PROMPT = 'posPrompt'
const KEY_NEGATIVE_PROMPT = 'negPrompt'

const TextPrompt = ({ isNotShowExplain }: Iporps) => {
    const { t } = useTranslation('studio')

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

    const [value, setValue] = useState<string>(taskResult[KEY_PROMPT] || '')
    const [negativeValue, setNegativeValue] = useState<string>(
        taskResult[KEY_NEGATIVE_PROMPT] || '',
    )

    useEffect(() => {
        setValue(taskResult[KEY_PROMPT] || '')
        setNegativeValue(taskResult[KEY_NEGATIVE_PROMPT] || '')
    }, [taskResult[KEY_PROMPT], taskResult[KEY_NEGATIVE_PROMPT]])

    const paste = (
        pastedText: string,
        selectionStart: number,
        selectionEnd: number,
        isPositive: boolean,
    ) => {
        const splits = pastedText.split(' --n ')
        const positive = splits[0]
        const negative = splits[1]
        if (isPositive) {
            if (!document.execCommand || !document.execCommand('insertText', false, positive)) {
                setValue(
                    (value) =>
                        value.slice(0, selectionStart) + positive + value.slice(selectionEnd),
                )
            }
            setNegativeValue((value) => value + negative)
        } else {
            setValue((value) => value + positive)
            if (!document.execCommand || !document.execCommand('insertText', false, negative)) {
                setNegativeValue(
                    (value) =>
                        value.slice(0, selectionStart) + negative + value.slice(selectionEnd),
                )
            }
        }
    }

    return (
        <>
            <div className={styles.textPrompt}>
                <div className={styles.textPromptItem}>
                    <div className={`ag14-t ${styles.title}`}>
                        <span>{t('promptObj.input')}</span>
                        <span className={styles.active}>{t('promptObj.positive')}</span>
                        <span>{t('promptObj.inputHint')}</span>
                        <span>{t('promptObj.required')}</span>
                    </div>

                    <PromptInput
                        height={312}
                        type="positive"
                        promptChange={() => {
                            handleTaskResult(KEY_PROMPT, value, false)
                            handleTaskResult(KEY_NEGATIVE_PROMPT, negativeValue)
                        }}
                        value={value}
                        setValue={setValue}
                        placeholder={
                            taskResult?.batchTask
                                ? t('promptObj.placeholder') +
                                  '. Combinatorial generation produced every possible prompt from the given string. For example: I {love|hate} {New York|Chicago} in {June|July|August}'
                                : t('promptObj.placeholder')
                        }
                        pasteCallback={(value, start, end) => {
                            paste(value, start, end, true)
                        }}
                    ></PromptInput>
                </div>

                <div className={`${styles.textPromptItem} ${styles.negative}`}>
                    <div className={`ag14-t ${styles.title}`}>
                        <span>{t('promptObj.input')}</span>
                        <span className={styles.active}>{t('promptObj.negative')}</span>
                        <span>{t('promptObj.inputHint')}</span>
                        <span>{t('promptObj.optional')}</span>
                    </div>
                    <PromptInput
                        height={312}
                        type="negative"
                        promptChange={() => {
                            handleTaskResult(KEY_NEGATIVE_PROMPT, negativeValue, false)
                            handleTaskResult(KEY_PROMPT, value)
                        }}
                        value={negativeValue}
                        setValue={setNegativeValue}
                        placeholder={t('promptObj.negativePlaceholder')}
                        pasteCallback={(value, start, end) => {
                            paste(value, start, end, false)
                        }}
                    ></PromptInput>
                </div>
            </div>
            {isNotShowExplain ? null : <Example></Example>}
        </>
    )
}

export default TextPrompt
