import React, { useEffect, useRef, useState } from 'react';
import { DrawerForm, ProFormInstance, ProFormText, ProFormUploadButton, ProFormRadio, ProForm } from '@ant-design/pro-components';
import { message } from 'antd';
import Upload, { RcFile } from 'antd/es/upload';
import AdvancedEditor from '@/components/TinyMCEEditor/AdvancedEditor';
import { fullConfig } from '@/components/TinyMCEEditor/config';

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.PbcFashionTrend_>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<API.PbcFashionTrend_>;
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  const formRef = useRef<ProFormInstance>();
  const [pbcType, setPbcType] = useState<number>(1);
  const [videoThumbnail, setVideoThumbnail] = useState<string>("");

  useEffect(() => {
    setPbcType(props.values.pbcType || 1)
    setVideoThumbnail(props.values.pbcThumbNail || "")
  }, [props.values.pbcId]);

  // 生成视频缩略图的函数
  const generateVideoThumbnail = async (videoUrl: string) => {
    try {
      // 创建视频元素
      const video = document.createElement('video');
      video.crossOrigin = 'anonymous';
      video.src = videoUrl;
      video.muted = true;
      
      // 监听视频加载完成事件
      await new Promise((resolve, reject) => {
        video.onloadeddata = resolve;
        video.onerror = reject;
        // 设置超时
        setTimeout(reject, 5000);
      });
      
      // 播放视频并暂停在第一帧
      video.currentTime = 0;
      await new Promise(resolve => {setTimeout(resolve, 200)});
      
      // 创建canvas并绘制视频帧
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      const ctx = canvas.getContext('2d');
      ctx?.drawImage(video, 0, 0, canvas.width, canvas.height);
      
      // 将canvas转为blob
      const blob = await new Promise<Blob>((resolve) => {
        canvas.toBlob((b) => resolve(b as Blob), 'image/jpeg', 0.95);
      });
      
      // 创建FormData并上传
      const formData = new FormData();
      formData.append('file', blob, 'thumbnail.jpg');
      
      // 发送请求上传缩略图
      const response = await fetch(`${process.env.BASE_URL}/oss/imgUpload`, {
        method: 'POST',
        headers: {
          authorization: localStorage.getItem('token') ?? '',
        },
        body: formData,
      });
      
      const result = await response.json();
      if (result.retcode) {
        setVideoThumbnail(result.data);
      }
    } catch (error) {
      console.error('生成视频缩略图失败:', error);
    }
  };

  return (
    <DrawerForm
      width={640}
      title={props.values.pbcId ? '编辑流行趋势' : '新增流行趋势'}
      open={props.updateModalVisible}
      formRef={formRef}
      onFinish={async (value: any) => {
        let pbcPicAddress = ""
        let pbcThumbNail = "https://oss-xfc.popshejie.com/pop-b2b2c/pdf_fac16828-ea35-4034-9ad8-263605611960.png"
        if (value.pbcType === 1 && value.pbcImage.length > 0) {
          pbcThumbNail = value.pbcImage[0].url || value.pbcImage[0].response.data;
          pbcPicAddress = value.pbcImage.map((e: any) => {
            return e.url || e.response.data;
          }).join(',');
        } else if (value.pbcType === 2 && value.pbcVideo.length > 0) {
          pbcPicAddress = value.pbcVideo[0].url || value.pbcVideo[0].response.data;
          pbcThumbNail = videoThumbnail;
        } else if (value.pbcType === 3 && value.pbcFile.length > 0) {
          pbcPicAddress = value.pbcFile[0].url || value.pbcFile[0].response.data;
          if (value.pbcThumbNail.length > 0) {
            pbcThumbNail = value.pbcThumbNail[0].url || value.pbcThumbNail[0].response.data;
          }
        }
        return props.onSubmit({ ...value, pbcPicAddress, pbcThumbNail, pbcContent: value.pbcType === 3 ? '预览文件' : value.pbcContent, pbcId: props.values.pbcId })
      }}
      drawerProps={{
        destroyOnHidden: true,
      }}
      initialValues={{
        pbcTitle: props.values.pbcTitle,
        pbcType: props.values.pbcType || 1,
        pbcImage: props.values.pbcType === 1 && props.values.pbcPicAddress ? props.values.pbcPicAddress.split(',').map((e, index) => {
          return {
            uid: '-' + index,
            name: e.substring(e.lastIndexOf('/') + 1),
            status: 'done',
            url: e,
          }
        }) : [],
        pbcVideo: props.values.pbcType === 2 && props.values.pbcPicAddress ? [{
          uid: '-1',
          name: props.values.pbcPicAddress.substring(props.values.pbcPicAddress.lastIndexOf('/') + 1),
          status: 'done',
          url: props.values.pbcPicAddress,
        }] : [],
        pbcFile: props.values.pbcType === 3 && props.values.pbcPicAddress ? [{
          uid: '-1',
          name: props.values.pbcPicAddress.substring(props.values.pbcPicAddress.lastIndexOf('/') + 1),
          status: 'done',
          url: props.values.pbcPicAddress,
        }] : [],
        pbcThumbNail: props.values.pbcType === 3 && props.values.pbcThumbNail ? [{
          uid: '-1',
          name: props.values.pbcThumbNail.substring(props.values.pbcThumbNail.lastIndexOf('/') + 1),
          status: 'done',
          url: props.values.pbcThumbNail,
        }] : [],
        pbcContent: props.values.pbcContent
      }}
      onOpenChange={(visible) => {
        formRef.current?.resetFields();
        if (!visible) {
          props.onCancel();
        }
      }}
    >
      <ProFormText
        placeholder={'请输入标题'}
        label="标题"
        rules={[
          {
            required: true,
            message: '标题为必填项',
          },
        ]}
        width="md"
        name="pbcTitle"
      />
      <ProFormRadio.Group
        name="pbcType"
        label="类型"
        options={[
          {
            label: '图片',
            value: 1,
          },
          {
            label: '视频',
            value: 2,
          },
          {
            label: '文件',
            value: 3,
          },
        ]}
        rules={[
          {
            required: true,
            message: '请选择类型',
          },
        ]}
        fieldProps={{
          onChange: (e) => {
            setPbcType(e.target.value)
            formRef.current?.setFieldValue('pbcImage', []);
            formRef.current?.setFieldValue('pbcThumbNail', []);
            formRef.current?.setFieldValue('pbcVideo', []);
            formRef.current?.setFieldValue('pbcFile', []);
          },
        }}
      />
      {pbcType === 3 ? <ProFormUploadButton
        label="缩略图"
        name="pbcThumbNail"
        max={1}
        fieldProps={{
          name: 'file',
          accept: 'image/*',
          multiple: true,
          headers: {
            authorization: localStorage.getItem('token') ?? '',
          },
          onChange: (info: any) => {
            switch (info.file.status) {
              case 'done':
                if (info.file.response.retcode === 0) {
                  message.error(info.file.response.retmsg);
                  formRef.current?.setFieldValue('pbcThumbNail', [])
                }
                break;
              default:
                break;
            }
          },
          action: process.env.BASE_URL + '/oss/imgUpload',
          beforeUpload(file: RcFile) {
            const isLt10M = file.size / 1024 / 1024 < 10;
            if (!isLt10M) {
              message.error('图片大小不能超过10MB!');
            }
            return isLt10M || Upload.LIST_IGNORE;
          },
          onPreview: async (file) => {
            if (file.uid.includes('-')) {
              window.open(file.url);
            }
            if (file.response && file.response.retcode) {
              window.open(file.response.data);
            }
          },
          listType: 'picture-card',
        }}
        rules={[
          { required: true, message: '请上传缩略图' },
        ]}
      /> : null}
      {pbcType === 1 ? <ProFormUploadButton
        label="上传图片"
        name="pbcImage"
        max={9}
        fieldProps={{
          name: 'file',
          accept: 'image/*',
          multiple: true,
          headers: {
            authorization: localStorage.getItem('token') ?? '',
          },
          onChange: (info: any) => {
            switch (info.file.status) {
              case 'done':
                if (info.file.response.retcode === 0) {
                  message.error(info.file.response.retmsg);
                  formRef.current?.setFieldValue('pbcImage', [])
                }
                break;
              default:
                break;
            }
          },
          action: process.env.BASE_URL + '/oss/imgUpload',
          beforeUpload(file: RcFile) {
            const isLt10M = file.size / 1024 / 1024 < 10;
            if (!isLt10M) {
              message.error('图片大小不能超过10MB!');
            }
            return isLt10M || Upload.LIST_IGNORE;
          },
          onPreview: async (file) => {
            if (file.uid.includes('-')) {
              window.open(file.url);
            }
            if (file.response && file.response.retcode) {
              window.open(file.response.data);
            }
          },
          listType: 'picture-card',
        }}
        rules={[
          { required: true, message: '请上传图片' },
        ]}
      /> :
      <ProFormUploadButton
        label={pbcType === 2 ? "上传视频" : "上传文件"}
        name={pbcType === 2 ? "pbcVideo" : "pbcFile"}
        max={1}
        fieldProps={{
          name: 'file',
          accept: pbcType === 2 ? 'video/mp4' : '.pdf',
          multiple: true,
          headers: {
            authorization: localStorage.getItem('token') ?? '',
          },
          onChange: (info: any) => {
            switch (info.file.status) {
              case 'done':
                if (info.file.response.retcode === 0) {
                  message.error(info.file.response.retmsg);
                  if (pbcType === 2) {
                    formRef.current?.setFieldValue('pbcVideo', [])
                  } else {
                    formRef.current?.setFieldValue('pbcFile', [])
                  }
                } else if (info.file.response && info.file.response.retcode && pbcType === 2) {
                  // 视频上传成功后，获取视频首帧作为缩略图
                  const videoUrl = info.file.response.data;
                  generateVideoThumbnail(videoUrl);
                }
                break;
              default:
                break;
            }
          },
          action: process.env.BASE_URL + '/oss/imgUpload',
          beforeUpload(file: RcFile) {
            const isLt300M = file.size / 1024 / 1024 < 300;
            if (!isLt300M) {
              message.error(`${pbcType === 2 ? '视频' : '文件'}大小不能超过300MB!`);
            }
            return isLt300M || Upload.LIST_IGNORE;
          },
          onPreview: async (file) => {
            if (file.uid === '-1') {
              window.open(file.url);
            }
            if (file.response && file.response.retcode) {
              window.open(file.response.data);
            }
          },
          listType: 'picture-card',
        }}
        rules={[
          { required: true, message: `请上传${pbcType === 2 ? '视频' : '文件'}'` },
        ]}
      />}
      {pbcType !== 3 ? <ProForm.Item
        name="pbcContent"
        label="趋势内容"
        rules={[
          {
            required: true,
            message: '趋势内容为必填项',
          },
        ]}
      >
        <AdvancedEditor
          height={500}
          placeholder="请输入内容"
          customConfig={fullConfig}
        />
      </ProForm.Item>:null}
    </DrawerForm>
  );
};

export default UpdateForm;