import React, { useContext } from 'react';
import { Image } from 'antd';
import ProProvider from '@ant-design/pro-provider';
import RichText from '@/generated/components/rich-text';
import '@/generated/styles/braft-editor-view.css';
import ImageUpload from '@/generated/components/image-upload';
import FileUpload from '@/generated/components/file-upload';
import gadmin from '@/gadmin';

const ValueTypeWrapper: React.FC = (props) => {
  const { children } = props;
  const values = useContext(ProProvider);
  return (
    <ProProvider.Provider
      value={{
        ...values,
        valueTypeMap: {
          richtext: {
            render: (text) => (
              <div dangerouslySetInnerHTML={{ __html: text }} className="braft-editor-view" />
            ),
            renderFormItem: (_text, formItemProps) => (
              <RichText {...formItemProps} {...formItemProps?.fieldProps} />
            ),
          },
          image: {
            render: (data) => {
              const urls = data.split('|');
              return (
                <Image.PreviewGroup>
                  {urls.map((e: string) => {
                    return <Image width={50} src={e} key={e} />;
                  })}
                </Image.PreviewGroup>
              );
            },
            renderFormItem: (_text, formItemProps) => (
              <ImageUpload {...formItemProps} {...formItemProps?.fieldProps} />
            ),
          },
          file: {
            render: (data) => <div dangerouslySetInnerHTML={{ __html: data }} />,
            renderFormItem: (_text, formItemProps) => (
              <FileUpload {...formItemProps} {...formItemProps?.fieldProps} />
            ),
          },
          ...gadmin.valueTypeMap,
        },
      }}
    >
      {children}
    </ProProvider.Provider>
  );
};

export default ValueTypeWrapper;