import { TextField } from '@mui/material';
import { useForm, Controller } from 'react-hook-form';
import { Button } from '@mui/material';
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 UploadOutlined from '@ant-design/icons/UploadOutlined';
import PandaPNG from '@/assets/panda.png';
import { FileUpload } from '../module/FileUpload';
import { useTranslation } from 'react-i18next';

export const Profile = () => {
  const { t } = useTranslation();
  const { control, handleSubmit, setValue, reset, formState, getValues } = useForm({
    defaultValues: {
      username: '',
      avatar: '',
      description: '',
    },
  });
  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,
      };
    }),
  );
  useEffect(() => {
    const fromData = layoutStore.me;
    if (isObjectNull(fromData)) {
      reset({
        username: '',
        avatar: '',
        description: '',
      });
    } else {
      reset({
        username: fromData.username,
        avatar: fromData.avatar || '',
        description: fromData.description || '',
      });
    }
    setAvatar(fromData.avatar || '');
  }, [layoutStore.me, setValue]);
  const onChange = (path: string) => {
    const url = path + '?t=' + new Date().getTime();
    setAvatar(url);
    setValue('avatar', url);
    const values = getValues();
    onFinish(values);
  };
  const onFinish = async (values) => {
    const newMe = await userStore.updateSelf(values);
    if (newMe) {
      layoutStore.setMe(newMe);
    }
  };
  return (
    <div className='w-full h-full bg-amber-50 p-4 '>
      <div className=' shadow-lg p-4 bg-white rounded-lg'>
        <div className='text-2xl'>{t('Profile')}</div>
        <div className='text-sm text-secondary'>{t('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 onSubmit={handleSubmit(onFinish)} className='flex flex-col gap-4'>
              <Controller
                name='username'
                control={control}
                render={({ field }) => <TextField {...field} label={t('Name')} className='w-full border rounded-lg p-2' disabled />}
              />
              <Controller
                name='avatar'
                control={control}
                render={({ field }) => (
                  <TextField
                    {...field}
                    label={t('Avatar')}
                    slotProps={{
                      input: {
                        endAdornment: (
                          <div>
                            <UploadOutlined
                              onClick={() => {
                                ref.current?.open?.();
                              }}
                            />
                            <FileUpload ref={ref} onChange={onChange} />
                          </div>
                        ),
                      },
                    }}
                  />
                )}
              />
              <Controller name='description' control={control} render={({ field }) => <TextField {...field} label={t('Description')} multiline rows={4} />} />
              <Button className='' type='submit' variant='contained'>
                {t('Save')}
              </Button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};