import { changeUserInfo, getSelfMessage } from '@/services/common/selfCenter';
import { getUploadToken } from '@/services/common/components';
import { QI_NIU_SEVER } from '@/services/Urls';
import BaseForm from '@/components/BaseForm';
import { 
  AVATAR_MAX_SIZE,
  PHONE_REG
} from '@/utils/constant';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { FormattedMessage, useIntl, useMutation,useModel } from '@umijs/max';
import {
  Card,
  Form,
  Skeleton,
  Upload,
  message,
  FormProps,
} from 'antd';
import React, { useEffect, useState } from 'react';
import * as qiniu from 'qiniu-js';
import dayjs from 'dayjs';
import user from '../../../assets/user.png';
import style from './index.less';

interface UserInfoFormData {
  avatar?:string;
  email: string;
  version: string | number;
  phone: string;
  nickname: string;
}
const AccountCenter: React.FC = () => {
  const intl = useIntl();
  const [userInfo, setUserInfo] = useState<any>({});
  const [imageUrl, setImageUrl] = useState<string>(user);
  const [loading, setLoading] = useState<boolean>(false);
  const [awaitLoad, setAwaitLoad] = useState<boolean>(false);
  const { initialState, setInitialState} = useModel('@@initialState');
  const [version, setVersion] = useState<number>(0);
  
  const [form] = Form.useForm();

  const qiNiuUpload = async (file: any, uploadToken: any) => {
    const observer = {
      // next(res: any) {
      //   console.log(res, 'next');
      //   // ...
      // },
      // error(err: any) {
      //   // ...
      //   console.log(err, 'error');
      // },
      complete(res: any) {
        //
        const url = `${QI_NIU_SEVER}/${res.key}`;
        // console.log(url, 'next');
        setLoading(false);
        setImageUrl(url);
        // console.log(upLoadFileList, 'complete');
        // onFinish(upLoadFileList);
        // ...
      },
    };
    const putExtra = {
      metadata: { 'x-qn-meta-': 'qiniu' },
    };
    const config = {
      useCdnDomain: true,
      // region: 'qiniu.region.z2'
    };
    // console.log(file, 11111);
    const time = dayjs().valueOf();
    const observable = qiniu.upload(
      file,
      `${time}_${file.name}`,
      uploadToken,
      putExtra,
      config,
    );
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const subscription = observable.subscribe(observer); // 上传开始
    // console.log('subscription', subscription);
  };
  const uploadButton = () => (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div className={style['margin-top-8']}>
        {intl.formatMessage({ id: 'form.handel.upload' })}
      </div>
    </div>
  );

  const { mutate } = useMutation(getSelfMessage, {
    onSuccess: async (resp: any) => {
      setImageUrl(resp.data.avatar || user);
      setUserInfo(resp.data);
      setAwaitLoad(true);
      setVersion(resp.data.version);
      setInitialState({
        ...initialState,
        currentUser: {
          ...resp.data,
          userImage: resp.data.avatar
        }
      });
      // refresh();
    },
  });

  // 获取用户信息
  const getUserInfo = () => {
    mutate();
  };
  const onFinish = (values: UserInfoFormData) => {
   const formData:UserInfoFormData = {
    nickname: values.nickname,
    phone: values.phone,
    email: values.email,
    version: version
   };
   
   if(imageUrl !== user) {
    formData.avatar = imageUrl;
   } 

    changeUserInfo(formData).then(() => {
      mutate();
    });
  };

  const customRequest = (info:any) => {
    if(info.file.size  && info.file.size > AVATAR_MAX_SIZE) {
      message.error(
        intl.formatMessage({ id: 'form.info.oversize' }),
      );
      return;
    }
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    getUploadToken()
        .then((res) => {
          if (res.data?.uploadToken) {
            qiNiuUpload(info.file, res.data?.uploadToken);
          } else {
            message.error('upload token is null');
          }
        })
        .catch(() => {
          message.error('getUploadToken error');
        });
    // const formData = new FormData();
    // formData.append('file', info.file);
    // uploadFile(formData).then((res: any) => {
    //   setLoading(false);
    //   setImageUrl(res.data.url);
    // }).catch((err: any) => {
    //   console.log(err);
      
    // });
  };


const beforeUpload = (file:any) => {
  const allowedFileTypes = ['image/jpeg', 'image/png', 'image/gif']; // 允许的文件类型
  const isAllowed = allowedFileTypes.includes(file.type);
  if (!isAllowed) {
    message.error('只能上传图片文件（JPEG, PNG, GIF）');
  }
  return isAllowed;
};

  const uploadRender = () =>{
    return(
      <div>
      <Upload
        accept="image/*"
        name="avatar"
        listType="picture-card"
        showUploadList={false}
        className="avatar-uploader"
        customRequest={customRequest}
        beforeUpload={beforeUpload}
      >
        {imageUrl ? (
          <img
            src={ imageUrl}
            alt="avatar"
            className={style['img-head']}
            onError={(e: React.SyntheticEvent<HTMLImageElement, Event>) => {
              const target = e.target as HTMLImageElement;
              target.src = user;
            }}
          />
        ) : (
          uploadButton()
        )}
      </Upload>
      <span className={style['limit-text']}>
        {intl.formatMessage({ id: 'form.info.uploadlimit' })}
      </span>
    </div>
    );
  };

  let itemColumn = [
    {
      type: 'custom',
      itemProps: {
        name: 'avatar',
        label:intl.formatMessage({
          id: 'pages.account.avatar',
        })
      },
      render:uploadRender
    },
    {
      type: 'input',
      itemProps: {
        name: 'username',
        label:intl.formatMessage({
          id: 'pages.account.account',
        }),
        rules: [
          {
            required: true,
            message: intl.formatMessage({
              id: 'pages.account.accountRequired',
            }),
          },
        ],
      },
      elementProps: {
        disabled:true,
      },
    },
    {
      type: 'input',
      itemProps: {
        name: 'nickname',
        label:intl.formatMessage({
          id: 'pages.account.username',
        }),
        rules: [
          {
            required: true,
            message: intl.formatMessage({
              id: 'pages.account.usernameRequired',
            }),
          },
        ],
      },
      elementProps: {
        allowClear:true
      },
    },
    {
      type: 'input',
      itemProps: {
        name: 'email',
        label:intl.formatMessage({
          id: 'pages.account.email',
        }),
        rules: [
          {
            required: true,
            type: 'email',
            message: intl.formatMessage({
              id: 'pages.account.emailInvalid',
            }),
          },
        ],
      },
      elementProps: {
        allowClear:true
      },
    },
    {
      type: 'input',
      itemProps: {
        name: 'phone',
        label:intl.formatMessage({
          id: 'pages.account.phone',
        }),
        rules: [
          {
            required: true,
            message: intl.formatMessage({
              id: 'pages.account.phoneRequired',
            }),
          },
          {
            pattern: PHONE_REG,
            message: intl.formatMessage({
              id: 'pages.account.phoneInvalid',
            }),
          },
        ],
      },
      elementProps: {
        allowClear:true
      },
    },
    {
      type: 'button',
      itemProps: {
        className:'text-center',
      },
      columns:[
        {
          elementProps:{
            type:'primary',
           htmlType:'submit',
          },
          key:1,
          value:<FormattedMessage id="form.handel.submit" />
        },
        {
          elementProps:{
           htmlType:'reset',
           className:style['margin-left-8']
          },
          value:<FormattedMessage id="form.handel.reset" />,
          key:2
        }
      ]
      
    }
  ];

  const config: FormProps = {
    form: form,
    initialValues:userInfo,
    labelCol: { span: 4},
    wrapperCol: { span: 14 },
    layout: 'horizontal',
    onFinish: onFinish,
    className:style['from-content']
  };
  useEffect(() => {
    getUserInfo();
  }, []);

  return (
    <div className={style['card-container']}>
    <Card className={style['card']} title={intl.formatMessage({ id: 'menu.account.center' })}>
      {!awaitLoad ? (
        <Skeleton active />
      ) : (
        <BaseForm itemColumn={itemColumn} config={config}/>
      )}
    </Card>
    </div>

  );
};
export default AccountCenter;