import { DetailedHTMLProps, HTMLAttributes, MouseEvent } from 'react'
import VanillaTilt, { TiltOptions } from 'vanilla-tilt'
import protocolCheck from 'custom-protocol-check'
import Icon from '@ant-design/icons'
import '@/assets/css/components/tools/store-card.scss'
import { COLOR_BACKGROUND, COLOR_MAIN, COLOR_PRODUCTION } from '@/constants/common.constants'
import { checkDesktop, omitText } from '@/util/common'
import { getLoginStatus, getUserId } from '@/util/auth'
import {
    navigateToLogin,
    navigateToSource,
    navigateToStore,
    navigateToView
} from '@/util/navigation'
import { r_tool_add_favorite, r_tool_remove_favorite } from '@/services/tool'
import Card from '@/components/common/Card'
import FlexBox from '@/components/common/FlexBox'
import DragHandle from '@/components/dnd/DragHandle'
import Draggable from '@/components/dnd/Draggable'

interface StoreCardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
    icon: string
    toolName: string
    toolId: string
    toolDesc: string
    options?: TiltOptions
    author: UserWithInfoVo
    showAuthor?: boolean
    ver: string
    platform: Platform
    supportPlatform: Platform[]
    favorite: boolean
}

const StoreCard = ({
    style,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    ref,
    icon,
    toolName,
    toolId,
    toolDesc,
    options = {
        reverse: true,
        max: 8,
        glare: true,
        ['max-glare']: 0.3,
        scale: 1.03
    },
    author,
    showAuthor = true,
    ver,
    platform,
    supportPlatform,
    favorite,
    ...props
}: StoreCardProps) => {
    const navigate = useNavigate()
    const [modal, contextHolder] = AntdModal.useModal()
    const cardRef = useRef<HTMLDivElement>(null)
    const [favorite_, setFavorite_] = useState<boolean>(favorite)
    const [userId, setUserId] = useState('')

    useEffect(() => {
        cardRef.current && VanillaTilt.init(cardRef.current, options)
        if (getLoginStatus()) {
            void getUserId().then((value) => setUserId(value))
        }
    }, [options])

    const handleCardOnClick = () => {
        if (!checkDesktop() && platform === 'DESKTOP') {
            void message.warning('此应用需要桌面端环境，请在桌面端打开')
            return
        }
        if (platform === 'ANDROID') {
            void modal.info({
                icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
                title: 'Android 端',
                centered: true,
                maskClosable: true,
                content: (
                    <FlexBox className={'android-qrcode'}>
                        <AntdQRCode
                            value={`oxygen://openurl/view/${author.username}/${toolId}`}
                            size={300}
                        />
                        <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
                    </FlexBox>
                )
            })
            return
        }
        navigateToView(navigate, author.username, toolId, platform)
    }

    const handleOnClickAuthor = (e: MouseEvent<HTMLDivElement>) => {
        e.stopPropagation()
        navigateToStore(navigate, author.username)
    }

    const handleOnSourceBtnClick = (e: MouseEvent<HTMLDivElement>) => {
        e.stopPropagation()
        navigateToSource(navigate, author.username, toolId, platform)
    }

    const handleOnStarBtnClick = (e: MouseEvent<HTMLDivElement>) => {
        e.stopPropagation()
        if (!getLoginStatus()) {
            navigateToLogin(navigate, undefined, `${location.pathname}${location.search}`)
            return
        }
        if (favorite_) {
            void r_tool_remove_favorite({
                authorId: author.id,
                toolId: toolId,
                platform: platform
            }).then((res) => {
                const response = res.data
                if (response.success) {
                    setFavorite_(false)
                } else {
                    void message.error('取消收藏失败，请稍后重试')
                }
            })
        } else {
            void r_tool_add_favorite({
                authorId: author.id,
                toolId: toolId,
                platform: platform
            }).then((res) => {
                const response = res.data
                if (response.success) {
                    setFavorite_(true)
                } else {
                    void message.error('收藏失败，请稍后重试')
                }
            })
        }
    }

    const handleOnAndroidBtnClick = (e: MouseEvent<HTMLDivElement>) => {
        e.stopPropagation()
        void modal.info({
            icon: <Icon style={{ color: COLOR_MAIN }} component={IconOxygenInfo} />,
            title: 'Android 端',
            centered: true,
            maskClosable: true,
            content: (
                <FlexBox className={'android-qrcode'}>
                    <AntdQRCode
                        value={`oxygen://openurl/view/${author.username}/${toolId}`}
                        size={300}
                    />
                    <AntdTag className={'tag'}>请使用手机端扫描上方二维码</AntdTag>
                </FlexBox>
            )
        })
    }

    const handleOnDesktopBtnClick = (e: MouseEvent<HTMLDivElement>) => {
        e.stopPropagation()
        if (!checkDesktop()) {
            void message.loading({ content: '启动桌面端中……', key: 'LOADING', duration: 0 })
            protocolCheck(
                `oxygen://openurl/view/${author.username}/${toolId}`,
                () => {
                    void message.warning('打开失败,此应用需要桌面端环境,请安装桌面端后重试')
                    void message.destroy('LOADING')
                },
                () => {
                    void message.destroy('LOADING')
                },
                2000,
                () => {
                    void message.warning('打开失败,此应用需要桌面端环境,请安装桌面端后重试')
                    void message.destroy('LOADING')
                }
            )
            return
        }
        navigateToView(navigate, author.username, toolId, platform)
    }

    const handleOnWebBtnClick = (e: MouseEvent<HTMLDivElement>) => {
        e.stopPropagation()
        navigateToView(navigate, author.username, toolId, platform)
    }

    return (
        <>
            <Draggable
                id={`${author.username}:${toolId}:${ver}`}
                data={{ icon, toolName, toolId, authorUsername: author.username, ver: 'latest' }}
            >
                <Card
                    data-component={'component-store-card'}
                    style={{ overflow: 'visible', ...style }}
                    ref={cardRef}
                    {...props}
                    onClick={handleCardOnClick}
                >
                    <FlexBox className={'store-card'}>
                        <div className={'header'}>
                            <div className={'version'}>
                                <AntdTag>
                                    {platform.slice(0, 1)}-{ver}
                                </AntdTag>
                            </div>
                            <div className={'operation'}>
                                {platform !== 'ANDROID' && supportPlatform.includes('ANDROID') && (
                                    <AntdTooltip title={'Android 端'}>
                                        <Icon
                                            component={IconOxygenMobile}
                                            onClick={handleOnAndroidBtnClick}
                                        />
                                    </AntdTooltip>
                                )}
                                {platform === 'DESKTOP' && supportPlatform.includes('WEB') && (
                                    <AntdTooltip title={'Web 端'}>
                                        <Icon
                                            component={IconOxygenBrowser}
                                            onClick={handleOnWebBtnClick}
                                        />
                                    </AntdTooltip>
                                )}
                                {platform === 'WEB' && supportPlatform.includes('DESKTOP') && (
                                    <AntdTooltip title={'桌面端'}>
                                        <Icon
                                            component={IconOxygenDesktop}
                                            onClick={handleOnDesktopBtnClick}
                                        />
                                    </AntdTooltip>
                                )}
                                <AntdTooltip title={'源码'}>
                                    <Icon
                                        component={IconOxygenCode}
                                        onClick={handleOnSourceBtnClick}
                                    />
                                </AntdTooltip>
                                {author.id !== userId && (
                                    <AntdTooltip title={favorite_ ? '取消收藏' : '收藏'}>
                                        <Icon
                                            component={
                                                favorite_ ? IconOxygenStarFilled : IconOxygenStar
                                            }
                                            style={{
                                                color: favorite_ ? COLOR_PRODUCTION : undefined
                                            }}
                                            onClick={handleOnStarBtnClick}
                                        />
                                    </AntdTooltip>
                                )}
                                <DragHandle />
                            </div>
                        </div>
                        <div className={'icon'}>
                            <img src={`data:image/svg+xml;base64,${icon}`} alt={'Icon'} />
                        </div>
                        <div className={'info'}>
                            <div className={'tool-name'}>{toolName}</div>
                            <div className={'tool-id'}>{`ID: ${toolId}`}</div>
                            {toolDesc && (
                                <div
                                    className={'tool-desc'}
                                    title={toolDesc}
                                >{`简介：${omitText(toolDesc, 18)}`}</div>
                            )}
                        </div>
                        {showAuthor && (
                            <div className={'author'} onClick={handleOnClickAuthor}>
                                <div className={'avatar'}>
                                    <AntdAvatar
                                        src={
                                            <AntdImage
                                                preview={false}
                                                src={`data:image/png;base64,${author.userInfo.avatar}`}
                                                alt={'Avatar'}
                                            />
                                        }
                                        style={{ background: COLOR_BACKGROUND }}
                                    />
                                </div>
                                <AntdTooltip title={author.username}>
                                    <div className={'author-name'}>{author.userInfo.nickname}</div>
                                </AntdTooltip>
                            </div>
                        )}
                    </FlexBox>
                </Card>
            </Draggable>
            {contextHolder}
        </>
    )
}

export default StoreCard