import React, { useEffect, useState } from 'react';
import './Profile.css';
import { Avatar, Button, Layout, Space, Typography } from 'antd';
import { UploadOutlined, UserOutlined } from '@ant-design/icons';
import { authenticationService } from '../_services';

const Profile = () => {
    const [loading, setLoading] = useState(false);
    
    let user = authenticationService.currentUserValue;

    return (
        <Layout style={{padding: '0 2rem 2rem'}}>
            <Layout.Content prefixCls='profile-page'>
                <div className='mb-1-0'>
                    <Typography.Text type='secondary'>Manage your personal and account details here</Typography.Text>
                </div>

                <Typography.Paragraph strong>Account Details</Typography.Paragraph>

                <Space className='avatar-container'>
                    <Avatar shape="square" src={null} size={80} icon={<UserOutlined />} />
                    <Button onClick={() => {}} type='ghost' icon={<UploadOutlined/>}>Change Picture</Button>
                </Space>

                <div className='user-info'>
                    <Typography.Paragraph strong style={{color: 'var(--font-color-primary)'}} type='primary'>Full Name</Typography.Paragraph>
                    <span>{user.first_name || user.last_name? <>{user.first_name} {user.last_name}</> : <Typography.Text type='warning'>No name entered</Typography.Text>}</span>
                    <Typography.Paragraph strong style={{color: 'var(--font-color-primary)'}} type='primary'>Email ID</Typography.Paragraph>
                    <span>{user.email_id}</span>
                    <Typography.Paragraph strong style={{color: 'var(--font-color-primary)'}} type='primary'>Phone Number</Typography.Paragraph>
                    <span>{user.mobile_num? user.mobile_num : <Typography.Text type='warning'>No number entered</Typography.Text>}</span>
                    <Typography.Paragraph strong style={{color: 'var(--font-color-primary)'}} type='primary'>Affiliated Institute</Typography.Paragraph>
                    <span>{user.institute_name? user.institute_name : <Typography.Text type='warning'>No institute associated</Typography.Text>}</span>
                    <Typography.Paragraph strong style={{color: 'var(--font-color-primary)'}} type='primary'>Role</Typography.Paragraph>
                    <span>{user.role_name? user.role_name : <Typography.Text type='warning'>No role assigned</Typography.Text>}</span>
                </div>

                <div className='button-container'>
                    <Button type='primary'>Change Password</Button>
                    <Button type='danger'>Deactivate Account</Button>
                </div>

            </Layout.Content>
        </Layout>
    );
}

export default Profile;