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';
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='flex w-full h-full bg-slate-200'>
      <div className='w-[600px] mx-auto mt-[10%]  '>
        <h1 className='mb-4 tracking-widest'>Login</h1>
        <div className='card border-t-2 pt-8 px-8'>
          <Form
            form={form}
            onFinish={onFinish}
            labelCol={{
              span: 4,
            }}>
            <Form.Item label='username' name='username'>
              <Input />
            </Form.Item>
            <Form.Item label='password' name='password'>
              <Input type='password' />
            </Form.Item>
            <Form.Item label=' ' colon={false}>
              <div className='flex gap-2'>
                <Button type='primary' htmlType='submit'>
                  Login
                </Button>
              </div>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
};
