import { Button, Form, Input } from 'antd';
import { useUserStore } from '../store';
import { useEffect, useRef, useState } from 'react';
import { useShallow } from 'zustand/react/shallow';
import { isObjectNull } from '@/utils/is-null';
import { useLayoutStore } from '@/modules/layout/store';
import { AvatarUpload } from '../module/AvatarUpload';
import { UploadOutlined } from '@ant-design/icons';
import PandaPNG from '@/assets/panda.png';
import { FileUpload } from '../module/FileUpload';
export const Profile = () => {
  const [form] = Form.useForm();
  const ref = useRef<any>(null);
  const userStore = useUserStore(
    useShallow((state) => {
      return {
        showEdit: state.showEdit,
        setShowEdit: state.setShowEdit,
        formData: state.formData,
        updateData: state.updateData,
        setFormData: state.setFormData,
        updateSelf: state.updateSelf,
      };
    }),
  );
  const [avatar, setAvatar] = useState<string>('');
  const layoutStore = useLayoutStore(
    useShallow((state) => {
      return {
        me: state.me,
        setMe: state.setMe,
      };
    }),
  );
  // const avatar = layoutStore.me?.avatar;
  useEffect(() => {
    const fromData = layoutStore.me;
    if (isObjectNull(fromData)) {
      form.setFieldsValue({});
    } else {
      form.setFieldsValue(fromData);
    }
    setAvatar(fromData.avatar || '');
  }, [layoutStore.me]);
  const onChange = (path: string) => {
    let url = '/resources/' + path;
    console.log('path', url);
    form.setFieldsValue({ avatar: url });
    setAvatar(url + '?t=' + new Date().getTime());
  };
  const onFinish = async (values) => {
    const newMe = await userStore.updateSelf(values);
    if (newMe) {
      layoutStore.setMe(newMe);
    }
  };
  return (
    <div className='w-full h-full bg-gray-200 p-4'>
      <div className='border shadow-lg p-4 bg-white rounded-lg'>
        <div className='text-2xl'>Profile</div>
        <div className='text-sm text-gray-500'>Edit your profile</div>
        <div className='flex gap-4'>
          <div className='w-[600px] p-4 border mt-2 '>
            <div className='w-full my-4'>
              {avatar && <img className='w-20 h-20 mx-auto rounded-full' src={avatar} alt='avatar' />}
              {!avatar && <img className='w-20 h-20 mx-auto  rounded-full' src={PandaPNG} alt='avatar' />}
            </div>
            <Form
              form={form}
              onFinish={onFinish}
              labelCol={{
                span: 4,
              }}>
              <Form.Item label='Name' name='username'>
                <Input className='w-full border rounded-lg p-2' disabled />
              </Form.Item>
              <Form.Item label='Avatar' name='avatar'>
                <Input
                  addonAfter={
                    <div>
                      <UploadOutlined
                        onClick={() => {
                          ref.current?.open?.();
                        }}
                      />
                      <FileUpload ref={ref} onChange={onChange} />
                    </div>
                  }
                />
              </Form.Item>
              <Form.Item label='Description' name='description'>
                <Input.TextArea rows={4} />
              </Form.Item>
              <Form.Item label=' ' colon={false}>
                <Button className='' htmlType='submit'>
                  保存
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    </div>
  );
};