import React, { useCallback, useEffect, useState } from "react"
import { Button, Col, Drawer, Form, Input, Radio, DatePicker, Row, Space, TimePicker, Steps, message, Select, Switch } from 'antd'
import moment from 'moment'
const { RangePicker } = DatePicker
const { Option } = Select;
const { Step } = Steps
import style from './index.less'
import modal from "antd/lib/modal"


type Props = {
    visible: boolean,
    hideModal: () => void
}
interface FieldData {
    name: string | number | (string | number)[];
    value?: any;
    touched?: boolean;
    validating?: boolean;
    errors?: string[];
}

const ageVal = {
    start: [14, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65],
    end: [18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65]
}

function AddAd(props: Props) {
    let { visible, hideModal } = props
    const [launchTime, setLaunchTime] = useState<number>(1)
    const [opTarType, setOpTarType] = useState<number>(1)
    const [capacity, setCapacity] = useState<boolean>(false)
    const [adSeat, setAdSeat] = useState<number>(1)
    const [steps, setSteps] = useState<number>(2)
    const [fields, setFields] = useState<FieldData[]>([  // 基本信息
        { name: ['username'], value: '12312' },   // 名称
        { name: ['extendTarget'], value: 1 },     // 推广目标
        { name: ['adSeat'], value: 1 },           // 广告位
        { name: ['opTarType'], value: 1 },        // 优化目标
        { name: ['launchType'], value: 1 },       // 投放模式
        { name: ['launchTime'], value: 1 },       // 投放时间
        { name: ['launchDate'], value: null },    // 投放日期
        { name: ['everyTime'], value: null },     // 投放日期
        { name: ['budget'], value: '10' },        // 每日预算
        { name: ['offer'], value: '1000' },       // 出价
        { name: ['capacity'], value: false },     // 一键起量
        { name: ['exploreBudget'], value: '' },   // 探索预算

        { name: ['ageStr'], value: 14 },          // 开始年龄
        { name: ['ageEnd'], value: 66 },          // 结束年龄
        { name: ['gender'], value: '全部' },      // 性别 
        { name: ['crowd'], value: undefined },    // 自定义人群

        { name: ['orittyle'], value: 1 },         // 创意样式
        { name: ['picture'], value: undefined },  // 图片
    ])

    useEffect(() => {
        fields.forEach((item: FieldData) => {
            if(item?.name[0] === 'launchTime') {
                setLaunchTime(item?.value)
            }else if(item?.name[0] === 'opTarType') {
                setOpTarType(item?.value)
            }else if(item?.name[0] === 'capacity'){
                setCapacity(item?.value)
            }else if(item?.name[0] === 'adSeat'){
                setAdSeat(item?.value)
            }
        })
        // let launchTimeVal: FieldData[] = fields.filter((item: FieldData) => item?.name[0] === 'launchTime')
        // if(launchTimeVal?.length > 0){
        //     setLaunchTime( launchTimeVal[0]?.value)
        // }
    }, [fields])

    const handleOk = useCallback(() => {
        
    }, [])

    // 基本信息 下一步
    const onFinish = (values: any) => {  
        console.log('Success:', values);
        switch(steps) {
            case 0:
                setSteps(steps + 1)
                return
            case 1: 
                setSteps(steps + 1)
                return
            case 2:
                return
        }
        
    };

    /** 错误提示 */
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
        message.error(errorInfo?.errorFields[0]?.errors[0]);
    };

    function disabledDate(current: any) {
        return current && current < moment().startOf('day');
    }

    const config = {
        title: '警告!',
        cancelText: '取消',
        okText: '确定',
        onOk: ()=>{hideModal()},
        content: (
          <>
            <div>不会保存您所做的更改，确定关闭？</div>
          </>
        ),
    };

    return <div className={style.addModal}>     
        <Drawer
            title="创建广告"
            placement="right"
            onClose={()=>{
                modal.confirm(config);
            }}
            visible={visible}
            width='55%'
            footer={
                <div className={style.drawer_footer}>
                    {/* <Space>
                        <Button onClick={() => { hideModal() }}>取消</Button>
                        <Button onClick={handleOk} type="primary">下一步</Button>
                    </Space> */}
                </div>
            }
        >
            <div className={style.boxCont}>
                <div className={style.timeLine}>
                    <Steps current={steps}>
                        <Step title="基本信息" />
                        <Step title="定向" />
                        <Step title="创意" />
                        <Step title="公众号" />
                    </Steps>
                </div>
                <div className={style.box}>
                    <div className={style.left}>
                        {
                            steps === 0 ? // 基本信息
                            <Row className={style.left_content}>
                                <div className={style.badge}>基本信息</div>
                                <Form
                                    name="basic"
                                    initialValues={{ remember: true }}
                                    onFinish={onFinish}
                                    onFinishFailed={onFinishFailed}
                                    fields={fields}
                                    layout="vertical"
                                    onFieldsChange={(_, allFields) => {
                                        setFields(allFields)
                                    }}
                                >
                                    <Form.Item label="名称" name="username" rules={[{ required: true, message: '请输入名称' }]} >
                                        <Input className={style.input}/>
                                    </Form.Item>
                                    <Form.Item label="推广目标" name="extendTarget" rules={[{ required: true, message: '请选择推广目标' }]} >
                                        <Radio.Group>
                                            <Radio value={1}>推广我的公众号</Radio>
                                        </Radio.Group>
                                    </Form.Item>
                                    <Form.Item label="广告位" name="adSeat" rules={[{ required: true, message: '请选择广告位' }]} >
                                        <Radio.Group>
                                            <Radio value={1}>公众号文章底部</Radio>
                                            <Radio value={2}>激励式广告</Radio>
                                            <Radio value={3}>优雅横板大图</Radio>
                                            <Radio value={4}>朋友圈信息流</Radio>
                                        </Radio.Group>
                                    </Form.Item>
                                    <Form.Item label="投放模式" name="launchType" rules={[{ required: true, message: '请选择投放模式' }]} >
                                        <Radio.Group>
                                            <Radio value={1}>均衡投放</Radio>
                                            <Radio value={2}>优先跑量</Radio>
                                            <Radio value={3}>优先成本</Radio>
                                        </Radio.Group>
                                    </Form.Item>
                                    <Form.Item label="优化目标类型" name="opTarType" rules={[{ required: true, message: '请选择优化目标类型' }]} >
                                        <Radio.Group>
                                            <Radio value={1}>关注</Radio>
                                            <Radio value={2}>下单</Radio>
                                        </Radio.Group>
                                    </Form.Item>
                                    <Form.Item label="投放日期" name="launchDate" rules={[{ required: true, message: '请选择投放日期' }]} >
                                        <RangePicker disabledDate={disabledDate} />
                                    </Form.Item>
                                    <Form.Item label="投放时间" name="launchTime" >
                                        <Radio.Group>
                                            <Radio value={1}>全天投放</Radio>
                                            <Radio value={2}>每日相同时段</Radio>
                                            {/* <Radio value={3}>自定义时段</Radio> */}
                                        </Radio.Group>
                                    </Form.Item>
                                    {launchTime === 2 ? <Form.Item label="每日投放时段" name="everyTime" rules={[{ required: true, message: '请选择每日投放时段' }]}>
                                        <TimePicker.RangePicker format='HH' className={style.timeRan}/>
                                    </Form.Item> : launchTime === 3 ? <div>
                                        
                                    </div> : null}
                                    <Form.Item label="购买方式" >
                                        竞价
                                    </Form.Item>
                                    <Form.Item label="出价方式" >
                                        oCOM{opTarType === 1 ? '-获取更多关注' : '-获取更多下单'}
                                    </Form.Item>
                                    <Form.Item label="每日预算" name="budget" rules={[{ required: true, message: '请输入每日预算' }]} >
                                        <Input className={style.input}  suffix="元/天"/>
                                    </Form.Item>
                                    <Form.Item label="出价" name="offer" rules={[{ required: true, message: '请输入出价' }]} >
                                        <Input className={style.input} suffix={`元/${opTarType === 1 ? '关注' : '下单'}`}/>
                                    </Form.Item>
                                    <Form.Item label="一键起量" name="capacity" >
                                        <Switch checkedChildren="已启用" unCheckedChildren="未启用" />
                                    </Form.Item>
                                    {capacity && <Form.Item label="探索预算" name="exploreBudget" rules={[{ required: true, message: '请输入探索预算' }]}>
                                        <Input className={style.input}/>
                                    </Form.Item>}
                                    <Form.Item>
                                        <Button type="primary" htmlType="submit">下一步</Button>
                                    </Form.Item>
                                </Form>
                            </Row>
                            : steps === 1 ? 
                            <Row className={style.left_content}>
                                <div className={style.badge}>定向</div>
                                <Form
                                    name="orient"
                                    initialValues={{ remember: true }}
                                    onFinish={onFinish}
                                    onFinishFailed={onFinishFailed}
                                    fields={fields}
                                    layout="vertical"
                                    onFieldsChange={(_, allFields) => {
                                        setFields(allFields)
                                    }}
                                >
                                    <Form.Item label="年龄" style={{ marginBottom: 0 }}>
                                        <Form.Item style={{ display: 'inline-block' }} name="ageStr">
                                            <Select style={{ width: 85 }}>
                                                {ageVal.start?.map((item: number) => (<Option value={item} key={`start` + item}>{item}岁</Option>))}
                                            </Select>
                                        </Form.Item>
                                        <span style={{ display: 'inline-block', width: '24px', lineHeight: '32px', textAlign: 'center' }} > - </span>
                                        <Form.Item style={{ display: 'inline-block' }} name="ageEnd">
                                            <Select style={{ width: 85 }}>
                                                {ageVal.end?.map((item: number) => (<Option value={item} key={`end` + item}>{item}岁</Option>))}
                                                <Option value={66}>65岁以上</Option>
                                            </Select>
                                        </Form.Item>
                                    </Form.Item>
                                    <Form.Item label="性别" name="gender" rules={[{ required: true, message: '请选择性别' }]} >
                                        <Radio.Group>
                                            <Radio value='全部'>全部</Radio>
                                            <Radio value='男'>男</Radio>
                                            <Radio value='女'>女</Radio>
                                        </Radio.Group>
                                    </Form.Item>
                                    <Form.Item label="自定义人群" name="crowd" rules={[{ required: true, message: '请选择自定义人群' }]}>
                                        <Select mode="multiple" allowClear style={{ width: '100%' }} >
                                            <Option value="1">人群包1</Option>
                                            <Option value="2">人群包2</Option>
                                        </Select>
                                    </Form.Item>
                                    <Form.Item label="地域" >
                                        全部
                                    </Form.Item>
                                    <Form.Item>
                                        <Space>
                                            <Button onClick={()=>{setSteps(steps - 1)}}>上一步</Button>
                                            <Button type="primary" htmlType="submit"> 下一步 </Button>
                                        </Space>
                                        
                                    </Form.Item>
                                </Form>
                            </Row>
                            : steps === 2 ? 
                            <Row className={style.left_content}>
                                <div className={style.badge}>创意</div>
                                {
                                    adSeat === 1 ? 
                                    <Form
                                        name="orient"
                                        initialValues={{ remember: true }}
                                        onFinish={onFinish}
                                        onFinishFailed={onFinishFailed}
                                        fields={fields}
                                        layout="vertical"
                                        onFieldsChange={(_, allFields) => {
                                            setFields(allFields)
                                        }}
                                    >
                                        <Form.Item label="创意样式" name="orittyle" >
                                            <Radio.Group>
                                                <Radio value={1}>大图式卡片</Radio>
                                                <Radio value={2}>图片式卡片</Radio>
                                                <Radio value={3}>名片式banner</Radio>
                                            </Radio.Group>
                                        </Form.Item>
                                        <Form.Item label="广告位图片" name="picture" rules={[{ required: true, message: '请上传图片' }]}>
                                            {/* <ImageCrop  imgIndex={1} fileSize={0.8} cropProp={{locked: true}} defaultCrop={{unit: 'px', width: 960, height: 540}} /> */}
                                        </Form.Item>
                                        <Form.Item>
                                            <Space>
                                                <Button onClick={()=>{setSteps(steps - 1)}}>上一步</Button>
                                                <Button type="primary" htmlType="submit"> 下一步 </Button>
                                            </Space>
                                        </Form.Item>
                                    </Form>
                                    : <>1111</>
                                }
                            </Row>
                            : null
                        }
                    </div>
                    {/* <div className={style.right}>
                        111
                    </div> */}
                </div>
            </div>
        </Drawer>
    </div>   
}

export default React.memo(AddAd)