import {
    createElement, //keep this createElement even we dont use it directly. bundler need it to bundle at run time
    Fragment, //keep this Fragment even we dont use it directly. bundler need it to bundle at run time
    createRoot,
    useContext,
    useEffect,
} from "@wordpress/element";
import {
    TabPanel,
    __experimentalHeading as Heading,
} from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import Welcome from "../components/welcome";
import Widgets from "../components/Widgets";
import Extensions from "../components/Extensions";

const TABS = [
    {
        name: "welcome",
        title: (
            <div className="tab_title">
                <svg viewBox="0 0 24 24"><path d="M19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20C20 20.5523 19.5523 21 19 21ZM13 19H18V9.15745L12 3.7029L6 9.15745V19H11V13H13V19Z"></path></svg>
                <p>{__("Welcome", 'elentix-addons-for-elementor')}</p>
            </div>
        ),
        component: <Welcome/>
    },
    {
        name: "widgets",
        title: (
            <div className="tab_title">
                <svg viewBox="0 0 24 24"><path d="M7 5C7 2.79086 8.79086 1 11 1C13.2091 1 15 2.79086 15 5H18C18.5523 5 19 5.44772 19 6V9C21.2091 9 23 10.7909 23 13C23 15.2091 21.2091 17 19 17V20C19 20.5523 18.5523 21 18 21H4C3.44772 21 3 20.5523 3 20V6C3 5.44772 3.44772 5 4 5H7ZM11 3C9.89543 3 9 3.89543 9 5C9 5.23554 9.0403 5.45952 9.11355 5.66675C9.22172 5.97282 9.17461 6.31235 8.98718 6.57739C8.79974 6.84243 8.49532 7 8.17071 7H5V19H17V15.8293C17 15.5047 17.1576 15.2003 17.4226 15.0128C17.6877 14.8254 18.0272 14.7783 18.3332 14.8865C18.5405 14.9597 18.7645 15 19 15C20.1046 15 21 14.1046 21 13C21 11.8954 20.1046 11 19 11C18.7645 11 18.5405 11.0403 18.3332 11.1135C18.0272 11.2217 17.6877 11.1746 17.4226 10.9872C17.1576 10.7997 17 10.4953 17 10.1707V7H13.8293C13.5047 7 13.2003 6.84243 13.0128 6.57739C12.8254 6.31235 12.7783 5.97282 12.8865 5.66675C12.9597 5.45952 13 5.23555 13 5C13 3.89543 12.1046 3 11 3Z"></path></svg>
                <p>{__("Widgets", 'elentix-addons-for-elementor')}</p>
            </div>
        ),
        component: <Widgets/>,
    },
    {
        name: "extensions",
        title: (
            <div className="tab_title">
                <svg viewBox="0 0 24 24"><path d="M2 4C2 3.44772 2.44772 3 3 3H10.4142L12.4142 5H21C21.5523 5 22 5.44772 22 6V20C22 20.5523 21.5523 21 21 21L3 21C2.45 21 2 20.55 2 20V4ZM10.5858 6L9.58579 5H4V7H9.58579L10.5858 6ZM4 9V19L20 19V7H12.4142L10.4142 9H4Z"></path></svg>
                <p>{__("Extensions", 'elentix-addons-for-elementor')}</p>
            </div>
        ),
        component: <Extensions/>,
    }
];

const App = () => {
    return (
        <div className="etafe-dashboard">
            
            
            <TabPanel
                tabs={TABS}
                initialTabName="welcome"
                className="dashboard_tab_left"
            >
                {(tab) => (
                    <>
                        {!tab.heading ? null : (
                            <Heading className="dashboard-heading">{tab.heading}</Heading>
                        )}
                        {tab.component}
                    </>
                )}
            </TabPanel>
        </div>
    );
};

const container = document.getElementById("root");
if (container) {
    const root = createRoot(container);
    root.render(
        <App />
    );
} else {
    console.log('document.getElementById("root") --> not found.');
}