import { Col, ColorPicker, Input, InputNumber, Radio, Select, Slider, Space } from 'antd';
import React, { useContext, useEffect, useState } from 'react';
import style from './index.less'
import './global.less'
import { DispatchMiniPageCreate } from './drawerMini';
import { RetweetOutlined, PlusOutlined, AlignLeftOutlined, AlignCenterOutlined, AlignRightOutlined, MenuOutlined } from '@ant-design/icons';
import UploadLoad from '../../components/materialMould/uploadLoad';
import { getVideoImgUrl, replaceSpecialTxt } from '@/utils/utils';

const Right: React.FC = () => {

    /**************************************/
    const { pageSpecs, setTopUrl, setCompt, setGlobal, setTopShortVideoUrl } = useContext(DispatchMiniPageCreate)!;
    const { pageElementsSpecList, globalElementsSpecList } = pageSpecs
    const activeSpec = pageElementsSpecList?.find((item: any) => item?.comptActive) || globalElementsSpecList?.find((item: any) => item?.comptActive)
    /**************************************/

    if (activeSpec) {
        return <Col flex="380px" className={style.left}>
            {activeSpec?.elementType === 'TOP_IMAGE' ? <div className="widget">
                <div className="caption section">
                    <div className="caption-title">顶部组件：图片</div>
                </div>
                <div className="form section">
                    <div className="form-caption">素材设置</div>
                    <div className="adui-form-item" style={{ alignItems: 'flex-start' }}>
                        <div className="adui-form-label">图片素材</div>
                        <div className="adui-form-control">
                            <UploadLoad
                                type='image'
                                uploadButton={<div className={`upload-img-item ${activeSpec?.url ? 'upload-img-item_uploaded' : ''}`}>
                                    {activeSpec?.url ? <div className="upload-img-item-inner" style={{ backgroundImage: `url(${activeSpec?.url})` }}>
                                        <div className='upload-img-item-action'>
                                            <RetweetOutlined />
                                        </div>
                                    </div> : <div className="upload-img-item-inner">
                                        <PlusOutlined />
                                    </div>}
                                </div>}
                                onChange={(value) => {
                                    setTopUrl(value)
                                }}
                            />
                        </div>
                    </div>
                </div>
            </div> : activeSpec?.elementType === 'TOP_VIDEO' ? <div className="widget">
                <div className="caption section">
                    <div className="caption-title">顶部组件：视频</div>
                </div>
            </div> : activeSpec?.elementType === 'TOP_SHORT_VIDEO' ? <div className="widget">
                <div className="caption section">
                    <div className="caption-title">顶部组件：短视频</div>
                </div>
                <div className="form section">
                    <div className="form-caption">短视频素材设置</div>
                    <div className="adui-form-item" style={{ alignItems: 'flex-start' }}>
                        <div className="adui-form-label">视频素材</div>
                        <div className="adui-form-control" style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                            {activeSpec?.data?.map((item: any, index: number) => <UploadLoad
                                key={index}
                                type='video'
                                uploadButton={<div className={`upload-img-item ${item?.url ? 'upload-img-item_uploaded' : ''}`}>
                                    {item?.url ? <div
                                        className="upload-img-item-inner"
                                        style={{ backgroundImage: `url(${getVideoImgUrl(item?.url)})` }}
                                    >
                                        <div className='upload-img-item-action'>
                                            <RetweetOutlined />
                                        </div>
                                    </div> : <div className="upload-img-item-inner">
                                        <PlusOutlined />
                                    </div>}
                                </div>}
                                onChange={(value, videoInfo) => {
                                    setTopShortVideoUrl(value, videoInfo, index)
                                }}
                            />)}
                            {activeSpec?.data?.every(item => item?.url) && <UploadLoad
                                type='video'
                                uploadButton={<div className={`upload-img-item`}>
                                    <div className="upload-img-item-inner">
                                        <PlusOutlined />
                                    </div>
                                </div>}
                                onChange={(value, videoInfo) => {
                                    setTopShortVideoUrl(value, videoInfo, -1)
                                }}
                            />}
                        </div>
                    </div>
                </div>
                <div className="form section">
                    <div className="form-caption">转化素材设置</div>
                    <div className="adui-form-item" style={{ alignItems: 'flex-start' }}>
                        <div className="adui-form-label">图片素材</div>
                        <div className="adui-form-control">
                            <UploadLoad
                                type='image'
                                uploadButton={<div className={`upload-img-item ${activeSpec?.url ? 'upload-img-item_uploaded' : ''}`}>
                                    {activeSpec?.url ? <div className="upload-img-item-inner" style={{ backgroundImage: `url(${activeSpec?.url ? activeSpec?.url : ""})` }}>
                                        <div className='upload-img-item-action'>
                                            <RetweetOutlined />
                                        </div>
                                    </div> : <div className="upload-img-item-inner">
                                        <PlusOutlined />
                                    </div>}
                                </div>}
                                onChange={(value) => {
                                    setCompt('url', value)
                                }}
                            />
                        </div>
                    </div>
                </div>
                <div className="form section">
                    <div className="form-caption">转化文案设置</div>
                    <Input.TextArea
                        placeholder={`请输入（不包含<>&'"/\以及TAB、换行、回车键）`}
                        autoSize={{ minRows: 4, maxRows: 6 }}
                        value={activeSpec?.tipText}
                        onChange={(e) => { setCompt('tipText', replaceSpecialTxt(e.target.value)) }}
                    />
                </div>
            </div> : activeSpec?.elementType === 'TEXT' ? <div className="widget">
                <div className="caption section">
                    <div className="caption-title">文本</div>
                </div>
                <div className="form section">
                    <div className="form-caption">推广文案</div>
                    <Input.TextArea
                        placeholder={`请输入（不包含<>&'"/\以及TAB、换行、回车键）`}
                        autoSize={{ minRows: 4, maxRows: 6 }}
                        value={activeSpec?.text}
                        onChange={(e) => { setCompt('text', replaceSpecialTxt(e.target.value)) }}
                    />
                </div>
                <div className="form section">
                    <div className="form-caption">字符与段落</div>
                    <div className="adui-form-item">
                        <div className="adui-form-label">字符样式</div>
                        <div className="adui-form-control">
                            <div className="fl-sb">
                                <div style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
                                    <Space size={20}>
                                        <Select
                                            value={activeSpec?.fontSize}
                                            style={{ width: 60 }} onChange={(e) => { setCompt('fontSize', e) }}
                                            options={[12, 14, 15, 16, 18, 20, 24, 36].map((item: number) => ({ label: item, value: item }))}
                                        />
                                        <Radio.Group onChange={(e) => { setCompt('fontWeight', e.target.value) }} value={activeSpec?.fontWeight}>
                                            <Radio.Button value={'normal'}>常规</Radio.Button>
                                            <Radio.Button value={'bold'}>加粗</Radio.Button>
                                        </Radio.Group>
                                    </Space>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="adui-form-item">
                        <div className="adui-form-label">颜色</div>
                        <div className="adui-form-control">
                            <Space size={10}>
                                <span>文本</span>
                                <ColorPicker
                                    onChange={(_, color) => { setCompt('color', color) }}
                                    value={activeSpec?.color}
                                />
                            </Space>
                        </div>
                    </div>
                    <div className="adui-form-item">
                        <div className="adui-form-label">对齐方式</div>
                        <div className="adui-form-control">
                            <Radio.Group onChange={(e) => { setCompt('textAlign', e.target.value) }} value={activeSpec?.textAlign}>
                                <Radio.Button value={'left'}><AlignLeftOutlined /></Radio.Button>
                                <Radio.Button value={'center'}><AlignCenterOutlined /></Radio.Button>
                                <Radio.Button value={'right'}><AlignRightOutlined /></Radio.Button>
                                <Radio.Button value={'justify'}><MenuOutlined /></Radio.Button>
                            </Radio.Group>
                        </div>
                    </div>
                </div>
                <div className="form section">
                    <div className="form-caption">边距</div>
                    <div className="adui-form-item" style={{ alignItems: 'center' }}>
                        <div className="adui-form-label">上边距</div>
                        <div className="adui-form-control">
                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                <div style={{ flexGrow: 1 }}><Slider value={activeSpec?.paddingTop} max={50} onChange={(value: number) => { setCompt('paddingTop', value) }} /></div>
                                <InputNumber min={0} max={50} step={1} value={activeSpec?.paddingTop} onChange={(value: number) => { setCompt('paddingTop', value) }} style={{ width: 80, marginLeft: 20 }} />
                            </div>
                        </div>
                    </div>
                    <div className="adui-form-item" style={{ alignItems: 'center' }}>
                        <div className="adui-form-label">下边距</div>
                        <div className="adui-form-control">
                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                <div style={{ flexGrow: 1 }}><Slider value={activeSpec?.paddingBottom} max={50} onChange={(value: number) => { setCompt('paddingBottom', value) }} /></div>
                                <InputNumber min={0} max={50} step={1} value={activeSpec?.paddingBottom} onChange={(value: number) => { setCompt('paddingBottom', value) }} style={{ width: 80, marginLeft: 20 }} />
                            </div>
                        </div>
                    </div>
                </div>
            </div> : activeSpec?.elementType === 'IMAGE' ? <div className="widget">
                <div className="caption section">
                    <div className="caption-title">图片</div>
                </div>
                <div className="form section">
                    <div className="form-caption">素材设置</div>
                    <div className="adui-form-item" style={{ alignItems: 'flex-start' }}>
                        <div className="adui-form-label">图片素材</div>
                        <div className="adui-form-control">
                            <UploadLoad
                                type='image'
                                uploadButton={<div className={`upload-img-item ${activeSpec?.url ? 'upload-img-item_uploaded' : ''}`}>
                                    {activeSpec?.url ? <div className="upload-img-item-inner" style={{ backgroundImage: `url(${activeSpec?.url ? activeSpec?.url : ""})` }}>
                                        <div className='upload-img-item-action'>
                                            <RetweetOutlined />
                                        </div>
                                    </div> : <div className="upload-img-item-inner">
                                        <PlusOutlined />
                                    </div>}
                                </div>}
                                onChange={(value) => {
                                    setCompt('url', value)
                                }}
                            />
                        </div>
                    </div>
                </div>
                <div className="form section">
                    <div className="form-caption">边距</div>
                    <div className="adui-form-item" style={{ alignItems: 'center' }}>
                        <div className="adui-form-label">上边距</div>
                        <div className="adui-form-control">
                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                <div style={{ flexGrow: 1 }}><Slider value={activeSpec?.paddingTop} max={50} onChange={(value: number) => { setCompt('paddingTop', value) }} /></div>
                                <InputNumber min={0} max={50} step={1} value={activeSpec?.paddingTop} onChange={(value: number) => { setCompt('paddingTop', value) }} style={{ width: 80, marginLeft: 20 }} />
                            </div>
                        </div>
                    </div>
                    <div className="adui-form-item" style={{ alignItems: 'center' }}>
                        <div className="adui-form-label">下边距</div>
                        <div className="adui-form-control">
                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                <div style={{ flexGrow: 1 }}><Slider value={activeSpec?.paddingBottom} max={50} onChange={(value: number) => { setCompt('paddingBottom', value) }} /></div>
                                <InputNumber min={0} max={50} step={1} value={activeSpec?.paddingBottom} onChange={(value: number) => { setCompt('paddingBottom', value) }} style={{ width: 80, marginLeft: 20 }} />
                            </div>
                        </div>
                    </div>
                </div>
            </div> : activeSpec?.elementType === 'FLOAT_BUTTON' ? <div className="widget">
                <div className="caption section">
                    <div className="caption-title">悬浮组件</div>
                </div>
                <div className="form section">
                    <div className="form-caption">素材设置</div>
                    <div className="adui-form-item" style={{ alignItems: 'flex-start' }}>
                        <div className="adui-form-label">图片素材</div>
                        <div className="adui-form-control">
                            <UploadLoad
                                type='image'
                                uploadButton={<div className={`upload-img-item ${activeSpec?.qrCodeFloatList?.[0] ? 'upload-img-item_uploaded' : ''}`}>
                                    {activeSpec?.qrCodeFloatList?.[0] ? <div className="upload-img-item-inner" style={{ backgroundImage: `url(${activeSpec?.qrCodeFloatList?.[0] ? activeSpec?.qrCodeFloatList?.[0] : ""})` }}>
                                        <div className='upload-img-item-action'>
                                            <RetweetOutlined />
                                        </div>
                                    </div> : <div className="upload-img-item-inner">
                                        <PlusOutlined />
                                    </div>}
                                </div>}
                                onChange={(value) => {
                                    setGlobal('qrCodeFloatList', [value])
                                }}
                            />
                        </div>
                    </div>
                </div>
            </div> : activeSpec?.elementType === "QR_CODE" ? <div className="widget">
                <div className="caption section">
                    <div className="caption-title">添加商家微信</div>
                </div>
                <div className="form section">
                    <div className="form-caption">素材设置</div>
                    <div className="adui-form-item" style={{ alignItems: 'flex-start' }}>
                        <div className="adui-form-label">图片素材</div>
                        <div className="adui-form-control">
                            <UploadLoad
                                type='image'
                                uploadButton={<div className={`upload-img-item ${activeSpec?.imageList?.[0] ? 'upload-img-item_uploaded' : ''}`}>
                                    {activeSpec?.imageList?.[0] ? <div className="upload-img-item-inner" style={{ backgroundImage: `url(${activeSpec?.imageList?.[0] ? activeSpec?.imageList?.[0] : ""})` }}>
                                        <div className='upload-img-item-action'>
                                            <RetweetOutlined />
                                        </div>
                                    </div> : <div className="upload-img-item-inner">
                                        <PlusOutlined />
                                    </div>}
                                </div>}
                                onChange={(value) => {
                                    setCompt('imageList', [value])
                                }}
                            />
                        </div>
                    </div>
                </div>
                <div className="form section">
                    <div className="form-caption">边距</div>
                    <div className="adui-form-item" style={{ alignItems: 'center' }}>
                        <div className="adui-form-label">上边距</div>
                        <div className="adui-form-control">
                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                <div style={{ flexGrow: 1 }}><Slider value={activeSpec?.paddingTop} max={50} onChange={(value: number) => { setCompt('paddingTop', value) }} /></div>
                                <InputNumber min={0} max={50} step={1} value={activeSpec?.paddingTop} onChange={(value: number) => { setCompt('paddingTop', value) }} style={{ width: 80, marginLeft: 20 }} />
                            </div>
                        </div>
                    </div>
                    <div className="adui-form-item" style={{ alignItems: 'center' }}>
                        <div className="adui-form-label">右边距</div>
                        <div className="adui-form-control">
                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                <div style={{ flexGrow: 1 }}><Slider value={activeSpec?.paddingRight} max={50} onChange={(value: number) => { setCompt('paddingRight', value) }} /></div>
                                <InputNumber min={0} max={50} step={1} value={activeSpec?.paddingRight} onChange={(value: number) => { setCompt('paddingRight', value) }} style={{ width: 80, marginLeft: 20 }} />
                            </div>
                        </div>
                    </div>
                    <div className="adui-form-item" style={{ alignItems: 'center' }}>
                        <div className="adui-form-label">下边距</div>
                        <div className="adui-form-control">
                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                <div style={{ flexGrow: 1 }}><Slider value={activeSpec?.paddingBottom} max={50} onChange={(value: number) => { setCompt('paddingBottom', value) }} /></div>
                                <InputNumber min={0} max={50} step={1} value={activeSpec?.paddingBottom} onChange={(value: number) => { setCompt('paddingBottom', value) }} style={{ width: 80, marginLeft: 20 }} />
                            </div>
                        </div>
                    </div>
                    <div className="adui-form-item" style={{ alignItems: 'center' }}>
                        <div className="adui-form-label">左边距</div>
                        <div className="adui-form-control">
                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                <div style={{ flexGrow: 1 }}><Slider value={activeSpec?.paddingLeft} max={50} onChange={(value: number) => { setCompt('paddingLeft', value) }} /></div>
                                <InputNumber min={0} max={50} step={1} value={activeSpec?.paddingLeft} onChange={(value: number) => { setCompt('paddingLeft', value) }} style={{ width: 80, marginLeft: 20 }} />
                            </div>
                        </div>
                    </div>
                </div>
            </div> : null}
        </Col>
    }
    return <Col flex="380px" className={style.left}></Col>
};

export default React.memo(Right);