import { Alert, AlertDescription, AlertTitle, Link, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
import React from "react";
import { getComponent } from "../Custom";

interface TabsProps {
    fitWidth?: boolean,
    tabsVariant?: string,
    tabPanels: any[],
    tabNames: string[],
    tabListBgColor?: string,
    tabsBgColor?: string,
    tabSpacing?: string,
    tabsTextColor?: string,
    selectedTabBgColor?: string,
    selectedTabTextColor?: string,
    tabPanelBgColor?: string,
}

const RenderComponent = (props: any) => {
    const { data } = props;
    const componentName = data.componentName;
    try {
        const DynamicComponent = getComponent(componentName);
        return (
            <DynamicComponent {...data} />
        );
    } catch (e) {
        return (
            <Alert status='error' alignItems={"start"} flexDirection='column' variant={"left-accent"} w="fit-content">
                <AlertTitle>Error: Unrecognized component: {componentName}.</AlertTitle>
                <AlertDescription>Didn't receive a valid component. Please refer to
                    <Link color={"#ed7837"} href="https://github.com/theaimegroup/library-docs">TabLayout Documentation</Link>
                </AlertDescription>
            </Alert>
        );
    }
}

const TabLayout = (props: TabsProps) => {
    const {
        fitWidth = true,
        tabsVariant = 'solid-rounded',
        tabNames = ["Default"],
        tabPanels = [],
        tabListBgColor = "transparent",
        tabsBgColor = "#ffffff",
        tabSpacing = "10px",
        tabsTextColor = "#636363",
        selectedTabBgColor = "#028AE7",
        selectedTabTextColor = "black",
        tabPanelBgColor = "#F7F7F7"
    } = props;

    return (
        <Tabs isFitted={fitWidth} h="100%" w="100%" variant={tabsVariant}>
            <TabList bg={tabListBgColor} border="none" w="100%">
                {tabNames.map((tab: string, i: number) => (
                    <Tab py={4} key={i}
                         fontWeight="500"
                         fontFamily={"Inter"}
                         fontSize="14px"
                         lineHeight={"20.57px"}
                         bg={tabsBgColor}
                         marginX={tabSpacing}
                         color={tabsTextColor}
                         _selected={{
                             color: `${selectedTabTextColor}`,
                             bg: `${selectedTabBgColor}`,
                             borderBottom: `3px solid ${selectedTabBgColor}`
                         }}>
                        {tab}
                    </Tab>
                ))}
            </TabList>

            <TabPanels p={6} bg={tabPanelBgColor}>
                {tabPanels.map((content: any, index:number) => (
                    <TabPanel py="25px" px={"0px"} key={index}>
                        <RenderComponent data={content} />
                    </TabPanel>
                ))}
            </TabPanels>
        </Tabs>
    );

};

export default TabLayout;