import React, { useContext } from 'react';
import './index.less';
import { Avatar, ConfigProvider, Form, Input, message, Modal, Popover, Spin, Upload } from 'antd';
import { withRouter } from 'react-router';
import { request } from '@wisdom-utils/utils';
import { FormattedMessage, useIntl } from '@wisdom-utils/components/lib/AppLayout/locales/localeExports';

import globalHeader from '@wisdom-utils/components/lib/AppLayout/locales/zh-CN/globalHeader';
import { appService } from '@wisdom-utils/components/lib/AppLayout/notifier/api';
import { API } from '@wisdom-utils/components/lib/AppLayout/notifier/api/service/user';
// eslint-disable-next-line import/named

const GlobalContext = React.createContext(ConfigProvider.ConfigContext);
const formItemLayout = {
  labelCol: {
    xs: { span: 4 },
    sm: { span: 4 },
  },
};

/* eslint-disable */
const getIOT = () =>
  window.globalConfig.loginTemplate === 'Dark - IOTMultiLogin.html' ||
  window.globalConfig.loginTemplate === '新春 - 智联.html';

class AvatarDropdown extends React.Component {
  /* eslint-disable no-unused-vars */

  constructor(props) {
    super(props);
    let {
      currentUser = {
        avatar: this.transformAvatarImage(),
        name:
          (props.config && props.config.userInfo && props.config.userInfo.fullName) || 'Serati Ma',
      },
    } = this.props;
    this.state = {
      currentUser: currentUser,
      visible: false,
      popVisible: false,
      path: null,
      version: null,
      action: API.UPLOAD_FILE_URL,
    };
  }
  loginout = (event) => {
    // eslint-disable-next-line no-undef
    this.props.logout();
    if (
      window.globalConfig.style === 'ios' &&
      window.globalConfig.loginTemplate === 'IOSCloud.html'
    ) {
      window.location.href = `${window.location.origin}/#login`;
      return false;
    }
    // console.log(this.props)
    // this.props.history.push('/login')
    // window.location.reload();
    //
  };

  getRoles = () => {
    const roles = this.props.config.userInfo.roles || [];
    const ret = [];
    roles.forEach((item) => {
      ret.push(item.name);
    });
    return ret.join(',');
  };

  showModal = (event) => {
    event.stopPropagation();
    this.setState({
      visible: true,
    });
  };

  handleOk = (event, form) => {
    event.stopPropagation();
    form
      .validateFields()
      .then((res) => {
        const params = getIOT()
          ? {
              newPassword: res.newPwd,
              phone: window.globalConfig.userInfo.Phone,
            }
          : {
              password: res.oldPwd,
              newpassword: res.newPwd,
              token: window.globalConfig.token,
            };
        appService
          .changePassword(params)
          .then((res) => {
            if (res.success) {
              //message.success(useIntl().formatMessage({id: 'component.account.password.update.success'}));
              message.success(globalHeader['component.account.password.update.success']);
              setTimeout(() => {
                this.setState({
                  visible: false,
                });
              }, 300);
            } else {
              message.error(
                useIntl().formatMessage({ id: 'component.account.oldpassword.errorMessage' }),
              );
            }
          })
          .catch((error) => {
            message.error(
              useIntl().formatMessage({ id: 'component.account.password.update.fail' }),
            );
          });
      })
      .catch((error) => {
        console.log(error);
      });
  };

  handleCancel = (event, form) => {
    event.stopPropagation();
    form.resetFields();
    this.setState({
      visible: false,
    });
  };

  transformAvatarImage() {
    const { userInfo } = this.props.config;
    const defaultImage = `${window.location.origin}/civweb4/assets/images/icon/熊猫新2.png`;
    let image = defaultImage;
    if (userInfo && userInfo.UserImge && userInfo.UserImge.indexOf('个人信息') > -1) {
      image = `/cityinterface/rest/services/filedownload.svc/download/${userInfo.UserImge}`;
    } else if (
      userInfo.UserImge &&
      userInfo.UserImge !== '' &&
      userInfo.UserImge !== 'default_user.png'
    ) {
      image = userInfo.UserImge;
    } else if (userInfo.WxImage && userInfo.WxImage !== '') {
      image = userInfo.WxImage;
    }
    return image;
  }

  beforeUpload(file) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    const path = new Date().getTime();
    this.setState({
      path: path,
      action: this.state.action.replace('{path}', path).replace('{filename}', file.name),
    });
    return isJpgOrPng && isLt2M;
  }

  handleChange(data) {
    console.log(data);
  }

  componentDidMount() {
    appService
      .getVersion({
        ignoreSite: true,
      })
      .then((res) => {
        if (res.success) {
          this.setState({
            version: res.message,
          });
        }
      })
      .catch((error) => {
        message.error(useIntl().formatMessage({ id: 'component.getVersion.errorMessage' }));
      });
  }

  customRequest = ({
    action,
    data,
    file,
    filename,
    headers,
    onError,
    onProgress,
    onSuccess,
    withCredentials,
  }) => {
    const formData = new FormData();
    if (data) {
      Object.keys(data).forEach((key) => {
        formData.append(key, data[key]);
      });
    }
    formData.append('filedata', file);
    request(action, {
      withCredentials,
      headers: {
        ...headers,
        Accept: '*/*',
        'civ-site': '',
      },
      method: 'post',
      data: formData,
      ignoreSite: true,
      onUploadProgress: ({ total, loaded }) => {
        onProgress({ percent: Math.round((loaded / total) * 100).toFixed(2) }, file);
      },
    })
      .then((res) => {
        onSuccess(res, file);
      })
      .catch(onError);
    return {
      abort() {
        console.log('upload progress is aborted.');
      },
    };
  };

  render() {
    const self = this;
    const { props } = this;
    const { userInfo } = props.config;
    const site =
      props.config &&
      props.config.userInfo &&
      props.config.userInfo.site &&
      userInfo.site !== '' &&
      props.config.client !== 'oms'
        ? userInfo.site
        : '';
    // const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
    // const prefixCls = getPrefixCls();
    const uploadProps = {
      action: this.state.action,
      onStart(file) {
        console.log('onStart', file, file.name);
      },
      onSuccess(res, file) {
        if (res.success) {
          const avatarPath = '/个人信息/' + self.state.path + '/' + file.name;
          const params = {
            userID: props.config.get('userInfo.OID'),
            loginName: props.config.get('userInfo.loginName'),
            userName: props.config.get('userInfo.fullName'),
            _version: self.state.version,
            mark: props.config.get('userInfo.Mark'),
            phone: props.config.get('userInfo.Phone'),
            email: props.config.get('userInfo.Email'),
            userImage: decodeURIComponent(avatarPath),
            WXid: props.config.get('userInfo.WXid'),
          };

          appService
            .updateAvatar(params)
            .then((res) => {
              if (res.success) {
                // message.success(useIntl().formatMessage({id: 'component.avatar.update.success'}));
                message.success(globalHeader['component.avatar.update.success']);
                self.setState({
                  currentUser: {
                    name: self.state.currentUser.name,
                    avatar: `${API.AVATAR_FILE_URL}${avatarPath}`,
                    action: API.UPLOAD_FILE_URL,
                  },
                });
              }
            })
            .catch((e) => {
              message.error(useIntl().formatMessage({ id: 'component.avatar.update.fail' }));
            });
        } else {
          message.error(res.message);
        }
      },
      onError(err) {
        console.log('onError', err);
      },
      onProgress({ percent }, file) {
        console.log('onProgress', `${percent}%`, file.name);
      },
      customRequest: this.customRequest.bind(this),
      beforeUpload: this.beforeUpload.bind(this),
      onChange: this.handleChange.bind(this),
    };
    const currentUser = this.state.currentUser;
    const menuHeaderDropdown = (prefixCls) => (
      <div className={`${prefixCls}-userWrapper-userInfo`}>
        <div className={`${prefixCls}-userWrapper-userInfo-header`} style={{background:'#00b278'}}>
          <Upload
            className="avatar-uploader"
            {...uploadProps}
            maxCount={1}
            itemRender={() => <></>}
          >
            <div
              className={`${prefixCls}-userWrapper-userInfo-header-avatar`}
              style={{ backgroundImage: `url(${currentUser.avatar})` }}
            />
          </Upload>
          <div className={`${prefixCls}-userWrapper-userInfo-header-name`}>{userInfo.fullName}</div>
        </div>
        <div className={`${prefixCls}-userWrapper-userInfo-body`}>
          <div className={`${prefixCls}-userWrapper-userInfo-body-item`}>
            <ul>
              <li>
                <span />
                <span className={`${prefixCls}-userWrapper-userInfo-body-item-label`}>
                  <FormattedMessage id="component.avatar.account" />：
                </span>
                <span className={`${prefixCls}-userWrapper-userInfo-body-item-value`}>
                  {userInfo.loginName}
                </span>
              </li>
              <li>
                <span />
                <span className={`${prefixCls}-userWrapper-userInfo-body-item-label`}>
                  <FormattedMessage id="component.avatar.name" />：
                </span>
                <span className={`${prefixCls}-userWrapper-userInfo-body-item-value`}>
                  {userInfo.fullName}
                </span>
              </li>
              <li>
                <span />
                <span className={`${prefixCls}-userWrapper-userInfo-body-item-label`}>
                  <FormattedMessage id="component.avatar.depart" />：
                </span>
                <span className={`${prefixCls}-userWrapper-userInfo-body-item-value`}>
                  {userInfo && userInfo.depart && userInfo.depart.name}
                </span>
              </li>
              <li>
                <span />
                <span className={`${prefixCls}-userWrapper-userInfo-body-item-label`}>
                  <FormattedMessage id="component.avatar.role" />：
                </span>
                <span className={`${prefixCls}-userWrapper-userInfo-body-item-value`}>
                  {this.getRoles()}
                </span>
              </li>
              {site ? (
                <li>
                  <span />
                  <span className={`${prefixCls}-userWrapper-userInfo-body-item-label`}>
                    <FormattedMessage id="component.siteCode" />：
                  </span>
                  <span className={`${prefixCls}-userWrapper-userInfo-body-item-value`}>
                    {userInfo.site}
                  </span>
                </li>
              ) : null}
            </ul>
          </div>
          <div className={`${prefixCls}-userWrapper-userInfo-body-exit`}>
            {userInfo && userInfo.site === '' && (
              <a onClick={(event) => this.showModal(event)}>
                <FormattedMessage id="component.password.update" />
              </a>
            )}

            <a onClick={this.loginout}>
              <FormattedMessage id="component.exit.login" />
            </a>
          </div>
        </div>
      </div>
    );

    return currentUser && currentUser.name ? (
      <GlobalContext.Consumer>
        {(value) => {
          const { getPrefixCls } = value._currentValue;
          const prefixCls = getPrefixCls();
          return (
            <>
              <Popover
                overlayClassName={`${prefixCls}-userWrapper`}
                placement="bottom"
                trigger="click"
                content={
                  props.config && props.config.userInfo ? menuHeaderDropdown(prefixCls) : null
                }
              >
                <span
                  className={`${prefixCls}-action ${prefixCls}-account`}
                  ref={(r) => (this.avatarRef = r)}
                >
                  <Avatar
                    size="small"
                    className={`${prefixCls}-account-avatar`}
                    src={currentUser.avatar}
                    alt="avatar"
                  />
                  {/* <span className={`${styles.name} anticon`}>{currentUser.name}</span> */}
                </span>
              </Popover>
              <Modal
                title="修改密码"
                centered
                width="480px"
                visible={this.state.visible}
                wrapClassName={`${prefixCls}-updatePassword`}
                cancelText="取消"
                okText="确定"
                onOk={(event) => this.handleOk(event, this.form)}
                onCancel={(event) => this.handleCancel(event, this.form)}
                zIndex={2000}
              >
                <Form labelAlign="right" {...formItemLayout} ref={(f) => (this.form = f)}>
                  {!getIOT() && (
                    <Form.Item
                      name="oldPwd"
                      label="原密码"
                      rules={[
                        {
                          required: true,
                          message: '请输入原始密码',
                        },
                      ]}
                      hasFeedback
                    >
                      <Input.Password />
                    </Form.Item>
                  )}
                  <Form.Item
                    name="newPwd"
                    label="新密码"
                    rules={[
                      {
                        required: true,
                        message: '请输入新密码',
                      },
                      {
                        pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9!@#$%^&*_]{8,16}$/,
                        message: '密码字符长度为8-16个字符',
                      },
                    ]}
                    hasFeedback
                  >
                    <Input.Password />
                  </Form.Item>
                  <Form.Item
                    name="confirmPwd"
                    label="确认密码"
                    dependencies={['newPwd']}
                    hasFeedback
                    rules={[
                      {
                        required: true,
                        message: '请输入确认密码',
                      },
                      ({ getFieldValue }) => ({
                        validator(rule, value) {
                          if (!value || getFieldValue('newPwd') === value) {
                            return Promise.resolve();
                          }
                          return Promise.reject('确认密码与新密码输入不一致');
                        },
                      }),
                    ]}
                  >
                    <Input.Password />
                  </Form.Item>
                </Form>
              </Modal>
            </>
          );
        }}
      </GlobalContext.Consumer>
    ) : (
      <GlobalContext.Consumer>
        {(value) => {
          const { getPrefixCls } = value._currentValue;
          const prefixCls = getPrefixCls();
          return (
            <span className={`${prefixCls}-action ${prefixCls}-account`}>
              <Spin
                size="small"
                style={{
                  marginLeft: 8,
                  marginRight: 8,
                }}
              />
            </span>
          );
        }}
      </GlobalContext.Consumer>
    );
  }
}

export default withRouter(AvatarDropdown);