import { UploadOutlined } from '@ant-design/icons';
import {
  ProForm,
  ProFormDependency,
  ProFormFieldSet,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { useRequest } from '@umijs/max';
import { Button, Cascader, Input, message, Upload } from 'antd';
import React from 'react';
import { queryCity, queryCurrent, queryProvince, updateCurrentUser } from '../service';
import useStyles from './index.style';
import chinaRegion, { code2Location } from '@/commonConstant/chinaRegion';

const validatorPhone = (rule: any, value: string[], callback: (message?: string) => void) => {
  if (!value[0]) {
    callback('Please input your area code!');
  }
  if (!value[1]) {
    callback('Please input your phone number!');
  }
  callback();
};

const BaseView: React.FC = () => {
  const { styles } = useStyles();
  // 头像组件 方便以后独立，增加裁剪之类的功能
  const AvatarView = ({ avatar }: { avatar: string }) => (
    <>
      <div className={styles.avatar_title}>头像</div>
      <div className={styles.avatar}>
        <img src={avatar} alt="avatar" />
      </div>
      <Upload showUploadList={false}>
        <div className={styles.button_view}>
          <Button>
            <UploadOutlined />
            更换头像
          </Button>
        </div>
      </Upload>
    </>
  );
  const { data: currentUser, loading } = useRequest(() => {
    return queryCurrent();
  });
  const getAvatarURL = () => {
    if (currentUser) {
      if (currentUser.avatar) {
        return currentUser.avatar;
      }
      const url = 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png';
      return url;
    }
    return '';
  };
  const handleFinish = async (values: any) => {
    console.log(values);
    values.location = values.location ? code2Location(values.location) : '';
    values.phone = Array.isArray(values.phone) ? values.phone[0] : values.phone;
    const res = await updateCurrentUser(values);
    console.log(res);
    
    message.success('更新基本信息成功');
  };
  return (
    <div className={styles.baseView}>
      {loading ? null : (
        <>
          <div className={styles.left}>
            <ProForm
              layout="vertical"
              onFinish={handleFinish}
              submitter={{
                searchConfig: {
                  submitText: '更新基本信息',
                },
                render: (_, dom) => dom[1],
              }}
              initialValues={{
                ...currentUser,
                phone: currentUser?.phone?.split('-'),
              }}
              hideRequiredMark
            >
              <ProFormText
                width="md"
                name="nickname"
                label="昵称"
                rules={[
                  /* {
                    required: true,
                    message: '请输入您的昵称!',
                  }, */
                ]}
              />
              <ProFormTextArea
                name="description"
                label="个人简介"
                rules={[
                  /* {
                    required: true,
                    message: '请输入个人简介!',
                  }, */
                ]}
                placeholder="个人简介"
              />
              <ProFormText
                width="md"
                name="email"
                label="邮箱"
                rules={[
                  /* {
                    required: true,
                    message: '请输入您的邮箱!',
                  }, */
                ]}
              />
              <ProFormText
                name="phone"
                label="联系电话"
                rules={[
                 /*  {
                    required: true,
                    message: '请输入您的联系电话!',
                  }, */
                  /* {
                    validator: validatorPhone,
                  }, */
                ]}
              />
              <ProFormSelect
                width="sm"
                name="country"
                label="国家/地区"
                rules={[
                  /* {
                    required: true,
                    message: '请输入您的国家或地区!',
                  }, */
                ]}
                options={[
                  {
                    label: '中国',
                    value: 'China',
                  },
                ]}
              />
              <ProFormText width="md" label="位置" name="location" rules={[{ required: false }]}>
                <Cascader
                  options={chinaRegion}
                  fieldNames={{ label: 'title', value: 'value', children: 'children' }}
                  placeholder="请选择省/市/区"
                />
              </ProFormText>
              
            </ProForm>
          </div>
          <div className={styles.right}>
            <AvatarView avatar={getAvatarURL()} />
          </div>
        </>
      )}
    </div>
  );
};
export default BaseView;
