import React, { useEffect, useState } from 'react';
import { contentcategoryPage } from '@/services/note/cate';

import {
  ProForm,
  ProFormDigit,
  ProFormText,
  ProFormDateTimePicker
} from '@ant-design/pro-components';
import { Form, Modal, InputNumber } from 'antd';
import { useIntl } from '@umijs/max';
import FilesManager from '@/components/FilesManage/index';

import { ContentUtils } from 'braft-utils'
// 引入编辑器组件
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'

const RoleForm: React.FC = (props: any) => {
  const [editorState, setEditorState] = useState(BraftEditor.createEditorState(''))
  const [form] = Form.useForm();

  const { values } = props;

  useEffect(() => {
    setEditorState(BraftEditor.createEditorState(values.detail))
    form.resetFields();
    form.setFieldsValue(values);
  }, [form, props]);

  const intl = useIntl();
  const handleOk = () => {
    form.submit();
  };
  const handleCancel = () => {
    props.onCancel();
  };
  const handleFinish = async (values: any) => {
    values.detail = editorState.toHTML()
    props.onSubmit(values);
  };


  const controls = [
    'undo', 'redo', 'separator',
    'font-size', 'line-height', 'letter-spacing', 'separator',
    'text-color', 'bold', 'italic', 'underline', 'strike-through', 'separator',
    'superscript', 'subscript', 'remove-styles', 'emoji', 'separator', 'text-indent', 'text-align', 'separator',
    'headings', 'list-ul', 'list-ol', 'blockquote', 'code', 'separator',
    'link', 'separator', 'hr', 'separator',
    'clear'
  ]

  const onChange = async (e) => {
    const videoExtensions = ['.mp4', '.mkv', '.avi', '.mov', '.wmv', '.flv', '.webm', '.m4v', '.3gp', '.3g2'];
    // 将URL转换为小写，以便进行不区分大小写的比较
    const lowerCaseUrl = e.toLowerCase();
    // 检查链接是否以任何一个视频扩展名结尾
    if (videoExtensions.some(e => lowerCaseUrl.endsWith(e))) {
      setEditorState(ContentUtils.insertMedias(editorState, [{
        type: 'VIDEO',
        url: e
      }]));
    } else {
      setEditorState(ContentUtils.insertMedias(editorState, [{ type: 'IMAGE', url: e, },]))
    }
  }


  const extendControls = [
    'separator',
    {
      key: 'FilesManagerImage', // 控件唯一标识，必传
      title: '上传图片/视频', // 指定鼠标悬停提示文案
      html: null, // 指定在按钮中渲染的html字符串
      text: <FilesManager
        fileType="images"
        mode=""
        imagesShow={false}
        onChange={onChange}
        count={1}
      />, // 指定按钮文字，此处可传入jsx，若已指定html，则text不会显示
      onClick: () => {
        console.log('Hello World!');
      },
    }
  ]


  return (
    <Modal
      width={800}
      title={'公告管理'}
      open={props.open}
      forceRender
      destroyOnClose
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <ProForm
        form={form}
        submitter={false}
        layout="horizontal"
        onFinish={handleFinish}>
        <ProFormDigit
          name="id"
          label={'ID'}
          disabled
          hidden={true}
        />
        <ProForm.Group>
          <ProFormText
            name="title"
            label={'标题'}
            placeholder="请输入标题"
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormText
            name="type"
            label={'类型'}
            placeholder="请输入类型"
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProFormDateTimePicker
            rules={[{ required: true, message: '请选择' }]}
            name="startTime"
            label="开始日期"
          />
          <ProFormDateTimePicker
            rules={[{ required: true, message: '请选择' }]}
            name="endTime"
            label="结束日期"
          />
        </ProForm.Group>
        <ProForm.Group>
          <ProForm.Item
            name="detail"
          >
            <div className="border-solid border-2 border-indigo-600">
              <BraftEditor value={editorState} controls={controls} extendControls={extendControls} onChange={(val) => {
                setEditorState(val)
              }} />
            </div>
          </ProForm.Item>
        </ProForm.Group>
      </ProForm>
    </Modal>
  );
};

export default RoleForm;
