import { setPageTitle } from '@/store/themeConfigSlice';
import { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import UserForm from '@/components/Users/Form';
import Link from 'next/link';

interface UserProps {
    user: any;
}
const EditUser: React.FC<UserProps> = ({ user }) => {
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(setPageTitle('User Edit'));
    }, []);

    const [userForm, setUserForm] = useState<any>({
        id: user.id,
        name: user.name,
        email: user.email,
        password: '',
        role: user.role,
        phone: user.phone,
        birthday: user.birthday,
        birthday_notification: user.birthday_notification,
        gender: user.gender,
        is_google: user.is_google,
        is_woo: user.is_woo,
        is_fb: user.is_fb,
        shipping: {
            name: user.shipping?.name || '',
            phone: user.shipping?.phone || '',
            address: user.shipping?.address || '',
            kecamatan: user.shipping?.kecamatan || '',
            kelurahan: user.shipping?.kelurahan || '',
            kota: user.shipping?.kota || '',
            provinsi: user.shipping?.provinsi || '',
            kodepos: user.shipping?.kodepos || '',
        },
    });

    return (
        <>
                <div className="mb-3">
                    <ul className="flex space-x-2 rtl:space-x-reverse">
                        <li>
                            <Link href="/setting/users" className="text-primary hover:underline">
                                Users
                            </Link>
                        </li>
                        <li className="before:content-['/'] ltr:before:mr-2 rtl:before:ml-2">
                            <span>edit</span>
                        </li>
                    </ul>
                </div>
                <div className="flex flex-col gap-2.5 xl:flex-row">
                    <UserForm userForm={userForm} setUserForm={setUserForm} isCreate={false} isUpdate={true} />
                </div>
        </>
    );
};
export default EditUser;

export const getServerSideProps = async (context: any) => {
    try {
        const { params } = context;
        const { user } = params;
        const api_url = process.env.API_URL;

        const response = await fetch(`${api_url}api/users/data/${user}`, {
            headers: {
                Cookie: context.req.headers.cookie || "",
            },
        });

        if (!response.ok) {
            return {
                notFound: true,
            };
        }
        const data = await response.json();
        return {
            props: {
                user: data,
            },
        };
    } catch (err) {
        return {
            notFound: true,
        };
    }
};