import React, { useEffect, useContext, useRef} from 'react';
import { Input,  Form } from 'antd'
import { ThemeContext, ModalWrapper } from 'educoder'
import axios from 'axios'
const MAX_LENGTH = 30

function EditVideoModal (props) {
    const modalEl = useRef(null);
    const theme = useContext(ThemeContext);
    const { history, videoId, cover_url, title, created_at, isReview, onEditVideo, visible, setVisible,
            form, editSuccess , link } = props;
    const getFieldDecorator = form.getFieldDecorator
    let username = props.match.params.username
    const _title = form.getFieldsValue().title;
    const _link = form.getFieldsValue().link;


    if(props.CourseUser){
        username = props.CourseUser;
    }

    function toList() {
        history.push(`/${username}/videos`)
    }
    function toUpload() {
        history.push(`/${username}/videos/upload`)
    }
    function onOk() {
        form.validateFieldsAndScroll((err, values) => {
            
            if (!err) {
                const url = link?`/course_videos/${videoId}.json`:`/${username}/videos/${videoId}.json`;
               
                axios.put(url, link ? {
                    name:_title,
                    link:_link
                }:{
                    title: _title,
                    link:_link
                }).then((response) => {
                    if (response.data) {
                        onCancel()
                        editSuccess()
                    }
                }).catch((e) => {

                })
            } else {
                // $("html").animate({ scrollTop: $('html').scrollTop() - 100 })
            }
        })

        // setVisible(false)

    }
    function onCancel() {
        setVisible(false)
    }
    useEffect(() => {
        modalEl.current.setVisible(visible)
    }, [visible])
    useEffect(() => {
        visible && form.setFieldsValue({
            title,link
        })
    }, [visible])
    return (
        <ModalWrapper 
            ref={modalEl}
            width="600px"
            
            { ...props }
            title={`视频标题编辑`}
            onOk={onOk}
            onCancel={onCancel}
            className="editVideoModal"
        >     <style>
            {
                `
                .exercicenewinputysl .ant-input{
                    border-right: none !important;
                    height: 40px !important;
                }
                `
            }
        </style>
            <Form.Item
                label="视频标题"
                className="title formItemInline"
            >
                
                {getFieldDecorator('title', {
                    rules: [{
                        required: true, message: '请输入标题',
                    }, {
                        max: MAX_LENGTH, message: '最大限制为30个字符',
                    }],
                })(
                    <Input placeholder="" className="titleInput exercicenewinputysl" maxLength={MAX_LENGTH}
                           addonAfter={String(_title ? `${String(_title.length)}/${MAX_LENGTH}` : 0)} />
                )}
                </Form.Item>
                {
                link ?
                <Form.Item
                    label="视频链接"
                    className="title formItemInline"
                >
                
                    {getFieldDecorator('link', {
                        rules: [{
                            required: true, message: '请输入视频链接',
                        }],
                    })(
                        <Input placeholder="请输入视频链接" className="titleInput exercicenewinputysl" />
                    )}
                </Form.Item>
                :""
            }
        </ModalWrapper>
    )
}
const WrappedEditVideoModal = Form.create({ name: 'editVideoModal' })(EditVideoModal);
export default WrappedEditVideoModal
