
import {
    mdiChartTimelineVariant,
    mdiPencil
} from '@mdi/js';
import Head from 'next/head';
import React, { ReactElement } from 'react';


import CardBox from '../../components/CardBox';
import LayoutAuthenticated from '../../layouts/Authenticated';
import SectionMain from '../../components/SectionMain';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import { getPageTitle } from '../../config';

import BaseButton from '../../components/BaseButton';

import { useAppSelector } from '../../stores/hooks';
import { useRouter } from 'next/router';
import UserAvatar from '../../components/UserAvatar';
import LoadingSpinner from '../../components/LoadingSpinner';

const ProfilePage = () => {
    const { currentUser } = useAppSelector(
        (state) => state.auth,
    );
    const router = useRouter();


    const handleEdit = () => {
        router.push('/profile/edit');
    }

    if (!currentUser) {
        return (
            <SectionMain>
                <LoadingSpinner />
            </SectionMain>
        );
    }

    return (
        <>
            <Head>
                <title>{getPageTitle('Profile')}</title>
            </Head>
            <SectionMain>
                <SectionTitleLineWithButton
                    icon={mdiChartTimelineVariant}
                    title='Profile'
                    main
                >
                    <BaseButton
                        icon={mdiPencil}
                        label='Edit'
                        color='info'
                        onClick={handleEdit}
                    />
                </SectionTitleLineWithButton>
                <CardBox className="mb-6">
                    <div
                        className="h-48 bg-cover bg-center"
                        style={{
                            backgroundImage:
                                "url('https://images.pexels.com/photos/1761279/pexels-photo-1761279.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1')",
                        }}
                    ></div>
                    <div className="flex justify-center -mt-24">
                        <div className="w-32 h-32 border-4 border-white rounded-full overflow-hidden">
                            {currentUser.avatar && currentUser.avatar.length > 0 ? (
                                <img
                                    className="w-full h-full object-cover"
                                    src={currentUser.avatar[0].publicUrl}
                                    alt="Avatar"
                                />
                            ) : (
                                <UserAvatar className="w-full h-full" />
                            )}
                        </div>
                    </div>
                    <div className="text-center mt-4">
                        <h1 className="text-2xl font-semibold">{`${currentUser?.firstName || ''} ${
                            currentUser?.lastName || ''
                        }`}</h1>
                        <p className="text-gray-500">{currentUser?.email}</p>
                        {currentUser.app_role && (
                            <p className="text-gray-500 mt-1 text-sm font-bold">{
                                currentUser.app_role.name.charAt(0).toUpperCase() +
                                currentUser.app_role.name.slice(1)
                            }</p>
                        )}
                    </div>
                </CardBox>
            </SectionMain>
        </>
    );
};

ProfilePage.getLayout = function getLayout(page: ReactElement) {
    return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
};

export default ProfilePage;
