/**
 * ExtraInfoDetail component contains the button and the data for corresponding to script mode and will open extrainfo  
 *
 * @description 
 * @author Sneha T
 */

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

import { Button, Drawer, Tabs, Skeleton } from 'antd';

import { Dashboard } from '../../models';

import { InfoCircleFilled } from '@ant-design/icons';

import './extra-info-details.scss';

import ExtraInfo from './extra-info';

// import ExtraInfo from ''; // Assuming ExtraInfo is defined

const { TabPane } = Tabs;

export default function ExtraInfoDetail({ modeValue, icon, title, ...record }) {

    // State to control drawer
    const [open, setOpen] = useState(false);

    // To set extra info data
    const [info, setInfo] = useState([]);
    //Setting active key for tabs
    const [activeKey, setActiveKey] = useState(null);

    // To strore selected item
    const [selectedItem, setSelectedItem] = useState(null);

    const [loading, setLoading] = useState(true);

    /**
    * Show Drawer
    */
    const showDrawer = () => {

        setActiveKey(null); // Reset activeKey before fetching new info

        getExtraInfo();

        setOpen(true);

    };

    /**
     * Function to close
     */
    const onClose = () => {

        setOpen(false);
    };

    /**
     * Function to get Info
     */
    async function getExtraInfo() {

        setSelectedItem()

        setLoading(true);

        let mode = modeValue

        const result = await Dashboard.getExtraInfo(mode);

        setInfo(result);

        setSelectedItem(result[0])

        setActiveKey(result[0].id.toString()); // Set activeKey to the first item's id

        setLoading(false);
    }

    /**
   * Function to render icon or button
   */
    const renderIconOrButton = () => {
        switch (icon) {
            case 'InfoCircleFilled':
                return <InfoCircleFilled onClick={showDrawer} />;
            case 'Button':
                return <Button size="small" onClick={showDrawer}>Show Info</Button>;
            default:
                return null;
        }
    };

    

    return (
        <>
            {/* {loading ? (
                <>
                    <Skeleton active />
                </>
            ) : ( */}
            <>
                {/*  */}
                {/* <Button onClick={showDrawer}> */}

                {/* <InfoCircleFilled onMouseEnter={showDrawer} /> */}

                {renderIconOrButton()}
                {/* </Button> */}
                {/*  */}

                {/*  */}
                <Drawer

                    width={'85%'}

                    title={title} onClose={onClose} open={open}>

                    <div className="main-drawer-content">

                        <div className="drawer-container">

                            <div className="drawer-click"> {/* Flexbox approach */}
                                <Tabs
                                    tabPosition="left"

                                    activeKey={activeKey} // Set activeKey to control the active tab

                                    onChange={(key) => {

                                        const selectedItem = info.find(item => item.id.toString() === key);

                                        setSelectedItem(selectedItem);

                                        setActiveKey(key);
                                    }}
                                >
                                    {info.map(item => (
                                        <TabPane tab={item.caption} key={item.id.toString()} />
                                    ))}
                                </Tabs>
                            </div>

                            <div className="right-drawer">

                                {selectedItem && !loading ? <ExtraInfo item={selectedItem} record={record} /> : null}

                            </div>

                        </div>

                    </div>

                </Drawer>

            </>
            {/* )} */}
        </>
    );
}
