import { Button, Form, Input } from 'antd';
import { useLoginStore } from '../store/login';
import { useShallow } from 'zustand/react/shallow';
import { useEffect } from 'react';
import { isObjectNull } from '@/utils/is-null';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
export const Login = () => {
  const [form] = Form.useForm();
  const loginStore = useLoginStore(
    useShallow((state) => {
      return {
        login: state.login,
        formData: state.formData,
        setFormData: state.setFormData,
      };
    }),
  );
  useEffect(() => {
    const isNull = isObjectNull(loginStore.formData);
    if (isNull) {
      form.setFieldsValue({});
    } else {
      form.setFieldsValue(loginStore.formData);
    }
  }, [loginStore.formData]);
  const onFinish = (values: any) => {
    loginStore.setFormData(values);
    loginStore.login();
  };
  return (
    <div className='bg-slate-200 text-slate-900 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'>Login</h1>
          <div className='card border-t-2 pt-8 px-8'>
            <Form
              className='mt-2'
              form={form}
              onFinish={onFinish}
              labelCol={{
                span: 6,
              }}>
              <Form.Item label='' name='username'>
                <Input addonBefore={<UserOutlined />} placeholder='Username' />
              </Form.Item>
              <Form.Item label='' name='password'>
                <Input type='password' addonBefore={<LockOutlined />} placeholder='Password' />
              </Form.Item>
              <Form.Item label='' colon={false}>
                <div className='flex gap-2'>
                  <Button
                    type='primary'
                    htmlType='submit'
                    style={{
                      background: '#84d5e8',
                    }}>
                    Login
                  </Button>
                </div>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    </div>
  );
};
