import {Button, Divider, Empty, Space} from "antd";
import TextArea from "antd/es/input/TextArea";
import {useEffect, useState} from "react";
import {CheckOutlined, EditOutlined, ReloadOutlined} from "@ant-design/icons";

type PropsType = {
    title: string;
    maxLength: number;
    text: string;
    newText: string;
    handleGenerate: () => void;
    handleSave: (newText: string) => void;
}

export default function AiHelperText(props: PropsType) {

    const [text, setText] = useState('');
    const [newText, setNewText] = useState('');
    const [isTextEdit, setIsTextEdit] = useState(false);
    const [isNewTextEdit, setIsNewTextEdit] = useState(false);

    useEffect(() => {
        setText(props.text);
        setNewText(props.newText);
    }, [props.text, props.newText])

    const renderTextBtn = () => {
        if (!newText) {
            if (!isTextEdit) {
                return (
                    <Space>
                        <Button type="link" style={{cursor: 'pointer'}} onClick={() => {
                            props.handleGenerate();
                        }}>AI生成</Button>
                        {
                            text ? (
                                <Button type="link" style={{cursor: 'pointer'}} onClick={() => {
                                    setIsTextEdit(true);
                                }}><EditOutlined/> 编辑</Button>
                            ) : <></>
                        }
                    </Space>
                )
            }
            return (
                <Space>
                    <Button type="link" style={{cursor: 'pointer'}} onClick={() => {
                        props.handleSave(text);
                        setIsTextEdit(false);
                    }}><CheckOutlined/> 保存结果</Button>
                </Space>
            )
        }
        if (!isNewTextEdit) {
            return (
                <Space>
                    <Button type="link" style={{cursor: 'pointer'}} onClick={() => {
                        props.handleSave(newText);
                        setIsNewTextEdit(false);
                    }}><CheckOutlined/> 保存结果</Button>
                    <Button type="link" style={{cursor: 'pointer'}} onClick={() => {
                        props.handleGenerate();
                    }}><ReloadOutlined/> 重新生成</Button>
                    <Button type="link" style={{cursor: 'pointer'}} onClick={() => {
                        setIsNewTextEdit(true);
                    }}><EditOutlined/> 编辑</Button>
                </Space>
            )
        }
        return (
            <Space>
                <Button type="link" style={{cursor: 'pointer'}} onClick={() => {
                    setIsNewTextEdit(false);
                }}><CheckOutlined/> 确定</Button>
            </Space>
        )
    }

    const renderTextDom = () => {
        if(!text) {
            return <Empty description="暂无内容"/>
        }
        if(!isTextEdit) {
            return <div>{text}</div>
        }
        return (
            <TextArea autoSize={true} value={text} placeholder={`请编辑${props.title}`} maxLength={props.maxLength} onChange={(e) => {
                setText(e.currentTarget.value);
            }}/>
        )
    }

    const renderNewTextDom = () => {
        if(!newText) {
            return <></>
        }
        if(!isNewTextEdit) {
            return (
                <>
                    <Divider orientation="right" plain>新{props.title}</Divider>
                    <div>{newText}</div>
                </>
            )
        }
        return (
            <>
                <Divider orientation="right" plain>新{props.title}</Divider>
                <TextArea autoSize={true} value={newText} placeholder={`请编辑${props.title}`} maxLength={props.maxLength} onChange={(e) => {
                    setNewText(e.currentTarget.value);
                }}/>
            </>
        )
    }

    return (
        <>
            <div style={{padding: '5px 0 0 0', fontWeight: 'bold'}}>{props.title}</div>
            <div style={{padding: '5px 0 0 0'}}>
                {newText ? <Divider orientation="right" plain>原{props.title}</Divider> : <></>}
                {renderTextDom()}
                {renderNewTextDom()}
            </div>
            <div style={{padding: '5px 0 0 0', textAlign: 'center'}}>
                {renderTextBtn()}
            </div>
        </>
    )

}