import React, { useState } from 'react'
import { Input, Form, Radio } from 'antd'
import './index.scss'
import { QuillForEditor } from 'educoder'
import TPMMDEditor from '../../../tpm/challengesnew/TPMMDEditor'
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 24 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 24 },
  },
}
const { TextArea } = Input
const TITLE_MAX_LENGTH = 60

function EditorTip() {
  return <p className='editor-tip'>编辑器选择：<span> (请在下方选择一个您想使用的编辑器) </span></p>
}

const quillOpt = [
  'bold',
  'italic',
  'underline', // 下划线
  { align: [] },  // 对齐方式
  { list: 'ordered' },  // 有序列表
  { list: 'bullet' }, // 无序列表
  { script: 'sub' },  // 下标  x2
  { script: 'super' }, // 上标 平方 (x2)
  { 'color': [] },  // 字体颜色
  { 'background': [] },  // 背景色
  'blockquote',  //  文件左边加一个边框样式
  'image',  // 图片
  'formula', // 数学公式
  'clean' // 清除
]

export default ({ exercise_name = '', exercise_description, is_md, onSaveHandler, isEdit, onCancel }) => {

  const [data, setData] = useState({
    exercise_name,
    exercise_description,
    is_md
  })

  function onChange(prop, value) {
    setData({ ...data, [prop]: value })
  }

  function onNameChange(e) {
    onChange('exercise_name', e.target.value)
  }

  function onDescChange(e) {
    onChange('exercise_description', e.target.value)
  }

  function onEditorChange(e) {
    onChange('is_md', e.target.value)
  }

  function onSave() {
    onSaveHandler(data)
  }

  return (
    <Form {...formItemLayout}>
      <div className='exercise-new-form'>
        <Form.Item label="试卷标题" required className="topicTitle " >
          <Input placeholder={`请输入试卷标题，最大限制${TITLE_MAX_LENGTH}个字符`} maxLength={TITLE_MAX_LENGTH} className="mt5 exercicenewinputysl" value={data.exercise_name}
            onChange={onNameChange} addonAfter={`${data.exercise_name.length}/${TITLE_MAX_LENGTH}`}
          />
        </Form.Item>
        <Form.Item label="&nbsp;&nbsp;试卷须知" >
          <TextArea placeholder="请在此输入本次试卷答题的相关说明，最大限制100个字符" className="mt5" style={{ height: "120px" }} value={data.exercise_description} onChange={onDescChange} />
        </Form.Item>

        <Form.Item label={<EditorTip />} colon={false}>
          <Radio.Group onChange={onEditorChange} value={data.is_md}>
            <Radio value={true}>Markdown 编辑器</Radio>
            <Radio value={false}>富文本编辑器</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item>
          {data.is_md ? <TPMMDEditor height={183} placeholder="体验过程输入的内容不会保存" refreshTimeout={1500} className="courseMessageMD" />
            : <QuillForEditor placeholder='体验过程输入的内容不会保存' options={quillOpt} style={{ height: 123 }} />}
        </Form.Item>

        <Form.Item>
          <a className="task-btn task-btn-orange fr mt4" onClick={onSave} >保存</a>
          {isEdit && <a onClick={onCancel} className="defalutCancelbtn fr mt4">取消</a>}
        </Form.Item>
      </div>

    </Form >

  )
}