import { mdiCheckDecagram } from '@mdi/js';
import { Field, Form, Formik } from 'formik';
import { useMemo } from 'react';
import { useAppSelector } from '../stores/hooks';
import CardBox from './CardBox';
import FormCheckRadio from './FormCheckRadio';
import UserAvatarCurrentUser from './UserAvatarCurrentUser';

type Props = {
  className?: string;
};

const UserCard = ({ className }: Props) => {
  // Get user data from authSlice.currentUser (single source of truth)
  const { currentUser } = useAppSelector((state) => state.auth);

  const userName = useMemo(() => {
    if (!currentUser) return '';
    const firstName = currentUser.firstName || '';
    const lastName = currentUser.lastName || '';
    return `${firstName} ${lastName}`.trim() || currentUser.email || '';
  }, [currentUser]);

  return (
    <CardBox className={className}>
      <div className='flex flex-col lg:flex-row items-center justify-around lg:justify-center'>
        <UserAvatarCurrentUser className='mb-6 lg:mb-0 lg:mx-12' />
        <div className='space-y-3 text-center md:text-left lg:mx-12'>
          <div className='flex justify-center md:block'>
            <Formik
              initialValues={{
                notifications: ['1'],
              }}
              onSubmit={(values) => alert(JSON.stringify(values, null, 2))}
            >
              <Form>
                <FormCheckRadio type='switch' label='Notifications'>
                  <Field type='checkbox' name='notifications' value={'1'} />
                </FormCheckRadio>
              </Form>
            </Formik>
          </div>
          <h1 className='text-2xl'>
            Howdy, <b>{userName}</b>!
          </h1>
        </div>
      </div>
    </CardBox>
  );
};

export default UserCard;