import { Dialog, DialogContent, DialogTitle, InputAdornment, TextField, Tooltip } 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';
import { Edit, UserCog } from 'lucide-react';
import { toast } from 'react-toastify';
import { useAdminStore } from '../admin/store/admin-store';
import { IconButton } from '@kevisual/components/button/index.tsx';
export const CheckUserExistModal = () => {
  const { t } = useTranslation();
  const userStore = useUserStore(
    useShallow((state) => {
      return {
        showCheckUserExist: state.showCheckUserExist,
        setShowCheckUserExist: state.setShowCheckUserExist,
      };
    }),
  );
  const adminStore = useAdminStore(
    useShallow((state) => {
      return {
        checkUserExist: state.checkUserExist,
      };
    }),
  );
  const onClose = () => {
    userStore.setShowCheckUserExist(false);
  };
  const [username, setUsername] = useState('@');

  const onCheck = async () => {
    const res = await adminStore.checkUserExist(username);
    console.log(res);
    if (res === false) {
      toast.info('当前用户名可以修改，点击右上角关注公众号联系客服修改。', {
        autoClose: 20000,
      });
      // toast.success(t('Check success'));
    } else {
      toast.error('当前用户名已存在，请更换其他用户名。');
    }
  };
  return (
    <Dialog open={userStore.showCheckUserExist} onClose={onClose}>
      <DialogTitle>{t('Tips')}</DialogTitle>
      <DialogContent>
        <div className='flex flex-col pt-4 gap-6 w-[400px]'>
          <div className='text-sm text-secondary'>{t('Check username introduction')}</div>
          <TextField label='username' value={username} onChange={(e) => setUsername(e.target.value)} />
          <Button variant='contained' color='primary' onClick={onCheck}>
            {t('Submit')}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
};
export const ChangePasswordModal = () => {
  const { t } = useTranslation();
  const userStore = useUserStore(
    useShallow((state) => {
      return {
        showChangePassword: state.showChangePassword,
        setShowChangePassword: state.setShowChangePassword,
        updateSelf: state.updateSelf,
      };
    }),
  );
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const onSubmit = async () => {
    if (newPassword !== confirmPassword) {
      toast.error('两次密码不一致');
      return;
    }
    const res = await userStore.updateSelf({
      password: newPassword,
    });
    if (res.code === 200) {
      onClose();
    }
  };
  const onClose = () => {
    setNewPassword('');
    setConfirmPassword('');
    userStore.setShowChangePassword(false);
  };
  return (
    <Dialog open={userStore.showChangePassword} onClose={onClose}>
      <DialogTitle>{t('Change Password')}</DialogTitle>
      <DialogContent>
        <div className='flex flex-col w-[400px] p-4 gap-4 pt-2'>
          {/* <TextField label='oldPassword' /> */}
          <TextField label='New Password' type='password' value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
          <TextField label='Confirm Password' type='password' value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
          <div className='flex justify-end gap-2  '>
            <Button variant='contained' color='primary' onClick={onSubmit}>
              {t('Submit')}
            </Button>
            <Button variant='contained' color='primary' onClick={onClose}>
              {t('Cancel')}
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
};
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,
        setShowCheckUserExist: state.setShowCheckUserExist,
        setShowChangePassword: state.setShowChangePassword,
      };
    }),
  );
  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 text-primary'>
      <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
                    slotProps={{
                      input: {
                        endAdornment: (
                          <Tooltip title={t('Apply Change Name')}>
                            <InputAdornment position='end'>
                              <Edit
                                className='w-4 h-4 cursor-pointer text-primary'
                                onClick={() => {
                                  console.log('onClick edit');
                                  userStore.setShowCheckUserExist(true);
                                }}
                              />
                            </InputAdornment>
                          </Tooltip>
                        ),
                        onKeyDown: (event) => {
                          if (event.key === 'Enter') {
                            // setSearch(field.value);
                          }
                        },
                      },
                    }}
                  />
                )}
              />
              <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 className='mt-2'>
            <Tooltip title={t('Change Password')}>
              <IconButton className='' onClick={() => userStore.setShowChangePassword(true)}>
                <UserCog size={16} />
              </IconButton>
            </Tooltip>
          </div>
        </div>
        <CheckUserExistModal />
        <ChangePasswordModal />
      </div>
    </div>
  );
};