import React, { useState } from 'react'
import { Col, Input, message, Modal, Radio, RadioChangeEvent, Row, Space, Switch } from 'antd'
import { useCallback } from 'react'
import style from './index.less'
import { PlusOutlined } from '@ant-design/icons'
import SmMaterialModal from '@/components/MaterialModal/smModalBox';
interface Props {
    visible: boolean,
    onCancel: () => void,
    onOk: (v: any) => void,
    title: string,
    weCathType: 'img' | 'card',
    defaultData?: { appid: string, appPath: string, cardTitle: string, img: string, imgInfo: any },
    isOnUserId?: boolean
}
function Alink(props: Props) {
    const { visible = false, title, onCancel, weCathType, onOk, isOnUserId = true } = props
    const [type, setType] = useState<1 | 2>(1)
    const [open, setOpen] = useState<boolean>(false)
    const [imgVisible, setImgVisible] = useState<boolean>(false)
    const [imgInfo, setImgInfo] = useState<any>(null)
    const [img, setImg] = useState<string>('')
    const [text, setText] = useState<string>('')
    const [link, setLink] = useState<string>('')
    const [size, setSize] = useState<25 | 50 | 75 | 100>(100)
    /**确定 */
    const handleOk = useCallback(() => {
        let html = ''
        if (!link) {
            message.error('请输入连接地址')
            return
        }
        if (!(text || img)) {
            message.error('请输入文本或者选择图片')
            return
        }
        if (type === 1) {
            if (open) {
                html = `<a data-linktype="2"  target="_blank"  tab="innerlink" data-itemshowtype="0"  href=${link}>${text}</a>`
            } else {
                html = ` <a data-linktype="2"  target="_blank"  tab="innerlink" data-itemshowtype="0"  href=${link} >${text}</a>`
            }
        } else {
            if (open) {
                html = `<br/><a data-itemshowtype="0" data-linktype="2" href=${link}  style="display: block;background-image: url(${img});background-repeat: no-repeat;background-size: ${size}% auto;background-position: center bottom;margin-top: 0%;padding-top: 40.85714285714286%;" tab="innerlink" target="_blank" ></a><br/>`
            } else {
                html = `<br/><a href=${link} data-linktype="2"  target="_blank"  tab="innerlink" data-itemshowtype="0"  style="display: block;background-image: url(${img});background-repeat: no-repeat;background-size:${size}% auto;background-position: center bottom;margin-top: 0%;padding-top: 40.85714285714286%;">&nbsp;</a><br/>`
            }
        }
        onOk(html)
    }, [open, type, img, text, link, size])
    //类型
    const onChange = useCallback((e: RadioChangeEvent) => {
        setType(e.target.value)
    }, [])
    return <div>
        <Modal
            visible={visible}
            title={title}
            onCancel={onCancel}
            onOk={handleOk}
            maskClosable={false}
        >
            <Row gutter={[10, 20]}>
                <Col span={24}>
                    <Space className={style.row_style}>
                        <span>链接地址</span>
                        <Input
                            placeholder={'请填写链接地址https://www.*****'}
                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                let v = e.target.value
                                setLink(v)
                            }}
                            value={link}
                        />
                    </Space>
                </Col>
                <Col span={24}>
                    <Space className={style.row_style}>
                        <span>链接类型</span>
                        <Radio.Group onChange={onChange} value={type}>
                            <Radio value={1}>文本</Radio>
                            <Radio value={2}>图片</Radio>
                        </Radio.Group>
                    </Space>
                </Col>
                <Col span={24}>
                    <Space className={style.row_style}>
                        <span>{type === 1 ? '链接文本' : '链接图片'}</span>
                        {
                            type === 1 ?
                                <Input
                                    placeholder={'请填写链接文本'}
                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                        let v = e.target.value
                                        setText(v)
                                    }}
                                    value={text}
                                /> :
                                <div onClick={() => setImgVisible(true)} style={{ width: '100%', height: 200, border: '1px dashed #d8d8d8', position: 'relative', cursor: 'pointer' }}>
                                    {
                                        img ?
                                            <>
                                                <img src={img} style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
                                            </>
                                            :
                                            <span className={`${style.add} ${img ? style.pos : ''} `}>
                                                <PlusOutlined style={{ fontSize: 32 }} />
                                            </span>
                                    }
                                </div>
                        }
                        {
                            imgVisible && <SmMaterialModal
                                visible={imgVisible}
                                onCancel={() => setImgVisible(false)}
                                title='选择图片'
                                onOk={(props: any) => {
                                    console.log('props===>', props)
                                    let obj: any = {}
                                    if (props?.mediaId) {//微信素材
                                        obj.wxMediaId = props?.id
                                        obj.thumbUrl = props?.url
                                    } else {
                                        obj.thumbUrl = props?.url
                                    }
                                    setImg(obj?.thumbUrl)
                                    setImgInfo(props)
                                    setImgVisible(false)
                                }}
                                mediaType={1}
                                isShowWx={false}
                                isAllData
                                noFile={true}
                            />
                        }
                    </Space>
                </Col>
                {
                    img && <Col span={24}>
                        <Space className={style.row_style}>
                            <span>图片大小</span>
                            <Radio.Group onChange={(e: RadioChangeEvent) => {
                                let v = e.target.value
                                setSize(v)
                            }} value={size}>
                                <Radio value={25}>25%</Radio>
                                <Radio value={50}>50%</Radio>
                                <Radio value={75}>75%</Radio>
                                <Radio value={100}>100%</Radio>
                            </Radio.Group>
                        </Space>
                    </Col>
                }
                <Col span={24}>
                    <Space className={style.row_style}>
                        <span>是否开启弹窗</span>
                        <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={(checked: boolean) => { setOpen(checked) }} checked={open} />
                    </Space>
                </Col>
            </Row>
        </Modal>
    </div>
}

export default Alink