/**
 * Common Profile Page
 */

import React, { useState, useEffect, useContext } from 'react';

import { GlobalContext } from './../../Store';

import { Divider, Typography, Radio, Card } from 'antd';

import './profile.scss';

// Import themes from themes.json for theme configuration
import themes from './themes.json';

// require basic theme images from assets for mapping themes from json
var lightThemeBg = require('../../assets/light-theme.png');

var darkThemeBg = require('../../assets/dark-theme.png');

var nuraThemeBg = require('../../assets/nura-theme.png');

var defaultThemeBg = require('../../assets/white-haze-theme.png');

var blueSlateThemeBg = require('../../assets/blue-slate-theme.png');

var whiteHazeThemeBg = require('../../assets/white-haze-theme.png');

var deepPurpleThemeBg = require('../../assets/deep-purple-theme.png');

const { Title, Text } = Typography;

/**
 * Profile Component for Desk 
 * 
 * 
 * @param {*} param0 
 * @returns 
 */
export default function Profile({ children, model, history, modules = [], sidemenu = [], ...props }) {

    const { user, state } = useContext(GlobalContext);

    {/* Code block for displaying and storing themes -START */ }

    // Create a map that links the JSON image keys to actual imported images
    const imageMap = {
        lightTheme: lightThemeBg,
        darkTheme: darkThemeBg,
        nuraTheme: nuraThemeBg,
        defaultTheme: defaultThemeBg,
        blackSlateTheme: blueSlateThemeBg,
        whiteHazeTheme: whiteHazeThemeBg,
        deepPurpleTheme: deepPurpleThemeBg
    }

    const { dispatch } = useContext(GlobalContext);

    // Initialize the selectedTheme from localStorage, falling back to default
    const [selectedTheme, setSelectedTheme] = useState(() => {

        const savedTheme = localStorage.getItem('selectedTheme');

        return savedTheme ? JSON.parse(savedTheme).name : themes[0].name;
    });

    // Function to handle theme change

    /**
     * 
     * 
     * @param {'*'} themeName 
     */
    const handleThemeChange = (themeName) => {
        const theme = themes.find((t) => t.name === themeName);

        if (theme) {
            // Dispatch theme colors to global state
            dispatch({
                type: 'appTheme',
                payload: theme
            });

            // Save selected theme to localStorage
            localStorage.setItem('selectedTheme', JSON.stringify(theme));

            console.log(theme);
        }
    }

    /**
     * Setting the theme on select of radio buttons
     * 
     * @param {*} e 
     */
    const onChange = (e) => {
        const themeName = e.target.value;

        //set the selected theme using useState
        setSelectedTheme(themeName);

        handleThemeChange(themeName);

        console.log(themeName);
    }

    // Apply the theme from localStorage on component mount
    useEffect(() => {

        // Apply the initial theme from localStorage on load
        handleThemeChange(selectedTheme);

    }, []); // Empty dependency array ensures this runs once on mount

    return (
        <>
            <Card className="profile" style={{ background: state.theme.colors.colorTableBg }}>

                <Divider></Divider>

                <div className="profile-headline">

                    <Title level={3} style={{ color: state.theme.colors.colorText }}>{user.name}</Title>
                </div>

                <Divider></Divider>

                {/* <p className="page-desc">{loader ? '. Loading data' : ``}</p> */}

                <div className="section-content">
                    <div className="section-row">
                        <div className="section-label">
                            <Text type="secondary" style={{ color: state.theme.colors.colorText }}>Name</Text>
                        </div>
                        <div className="section-value" style={{ color: state.theme.colors.colorText }}>
                            <strong>{user.name}</strong>
                        </div>
                    </div>

                    <div className="section-row">
                        <div className="section-label">
                            <Text type="secondary" style={{ color: state.theme.colors.colorText }}>Role</Text>
                        </div>
                        <div className="section-value" style={{ color: state.theme.colors.colorText }}>
                            <strong>{user.role && user.role.name}</strong>
                        </div>
                    </div>

                    <div className="section-row">
                        <div className="section-label">
                            <Text type="secondary" style={{ color: state.theme.colors.colorText }}>Phone</Text>
                        </div>
                        <div className="section-value" style={{ color: state.theme.colors.colorText }}>
                            <strong>{user.phone}</strong>
                        </div>
                    </div>

                    <div className="section-row">
                        <div className="section-label">
                            <Text type="secondary" style={{ color: state.theme.colors.colorText }}>Email</Text>
                        </div>
                        <div className="section-value" style={{ color: state.theme.colors.colorText }}>
                            <strong>{user.email}</strong>
                        </div>
                    </div>

                    {/* <div className="section-row">
                    <div className="section-label">
                        <Text type="secondary">Role</Text>
                    </div>
                    <div className="section-value">
                        <strong>{user.role.name}</strong>
                    </div>
                </div>  */}
                    {/* <div className="section-row">
                    <div className="section-label">
                        <Text type="secondary">Location</Text>
                    </div>
                    <div className="section-value">
                        <div className="locations">
                            {user.locations.map((loc, key) => (
                                <Tag color="blue" key={key}>
                                    {loc}
                                </Tag>
                            ))}
                        </div>
                    </div>
                </div> */}


                    {/* <div className="section-row">
                    <div className="section-label">
                        <Text type="secondary">Location</Text>
                    </div>
                    <div className="section-value">
                        <div className="locations">
                        </div>
                    </div>
                </div>  */}

                    {/* <div className="section-row">
                     <div className="section-label">
                         <Text type="secondary">Subscribe for Notifications</Text>
                     </div>
                     <div className="section-value">
                         <strong><Switch checkedChildren="Yes" unCheckedChildren="No" /></strong>
                     </div>
                 </div> */}
                </div>

                {/* Code block for displaying themes - START */}
                <div className='theme-section'>
                    <Radio.Group className="theme-radio-group"
                        onChange={onChange} value={selectedTheme}>
                        <div className="theme-container">
                            {themes.map((theme) => (
                                <div key={theme.name} className="radio-button-wrapper">
                                    <Radio.Button value={theme.name} className="radio-button">
                                        <Card
                                            className={`theme-card ${selectedTheme === theme.name ? 'selected' : ''}`}
                                            hoverable
                                            cover={<img alt={theme.caption} src={imageMap[theme.image]} />}
                                        >
                                            <div className="caption-name">
                                                <div className="theme-name">{theme.caption}</div>
                                                <div className="custom-radio">
                                                    <div className={`radio-circle ${selectedTheme === theme.name ? 'checked' : ''}`}>
                                                        {selectedTheme === theme.name ? '✓' : ''}
                                                    </div>
                                                </div>
                                            </div>
                                        </Card>
                                    </Radio.Button>
                                </div>
                            ))}
                        </div>
                    </Radio.Group>
                </div>
                {/* Code block for displaying themes -END */}

            </Card>

        </>
    );
}
