import { useLoginStore } from '../store/login';
import { useShallow } from 'zustand/react/shallow';
import LockOutlined from '@ant-design/icons/LockOutlined';
import UserOutlined from '@ant-design/icons/UserOutlined';
import { Button } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { TextField, InputAdornment } from '@mui/material';
import { useForm, Controller } from 'react-hook-form';
export const Login = () => {
  const { t } = useTranslation();
  const { control, handleSubmit } = useForm();
  const loginStore = useLoginStore(
    useShallow((state) => {
      return {
        login: state.login,
        formData: state.formData,
        setFormData: state.setFormData,
      };
    }),
  );

  const onFinish = (values: any) => {
    loginStore.setFormData(values);
    loginStore.login();
  };

  return (
    <div className='bg-gray-100 w-full h-full overflow-hidden'>
      <div className='w-full h-full absolute top-[10%] xl:top-[15%] 2xl:top-[18%] 3xl:top-[20%] '>
        <div className='w-[400px] mx-auto'>
          <h1 className='mb-4 tracking-widest text-center'>{t('Login')}</h1>
          <div className='card border-t-2 border-gray-200 pt-8 px-8'>
            <form className='mt-2 flex flex-col gap-8' onSubmit={handleSubmit(onFinish)}>
              <Controller
                name='username'
                control={control}
                render={({ field }) => (
                  <TextField
                    {...field}
                    label={t('Username')}
                    variant='outlined'
                    fullWidth
                    slotProps={{
                      input: {
                        startAdornment: (
                          <InputAdornment position='start'>
                            <UserOutlined className='text-primary!' />
                          </InputAdornment>
                        ),
                      },
                    }}
                  />
                )}
              />
              <Controller
                name='password'
                control={control}
                render={({ field }) => (
                  <TextField
                    {...field}
                    type='password'
                    label={t('Password')}
                    variant='outlined'
                    fullWidth
                    slotProps={{
                      input: {
                        startAdornment: (
                          <InputAdornment position='start'>
                            <LockOutlined className='text-primary!' />
                          </InputAdornment>
                        ),
                      },
                    }}
                  />
                )}
              />
              <div className='flex gap-2'>
                <Button type='submit' variant='contained'>
                  {t('Login')}
                </Button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};
