import React from 'react'
import { Tabs, TabList, Tab, TabPanels, TabPanel, Box } from "@chakra-ui/react";
import { renderJSON } from "../renderJson";

export type TabType = {
    title: string
    content: string | any[]
    json: any
    attrs?: {
        title: string
    }
}

export type TapsViewProps = {
    tabs: TabType[]
}

export function TabsView({ tabs }: TapsViewProps) {
    return (
        <Tabs
            variant="solid-rounded"
            border="1px solid"
            borderColor="gray.100"
            borderRadius="md"
            py={4}
            mt={4}
        >
            <TabList>
                {tabs.map(({ attrs, title }, index) => (
                    <Tab
                        _active={{ color: 'white', bgColor: 'brand.500' }}
                        key={index}
                    >
                        {attrs?.title || title}
                    </Tab>
                ))}
            </TabList>

            <TabPanels>
                {tabs.map(({ title, content, json }, index) => {
                    // Nový formát
                    if (typeof content === 'object') {
                        return (
                            <TabPanel key={index}>
                                <Box
                                    key={title}
                                    mb={6}
                                    sx={{
                                        'a:hover': {
                                            color: 'uat_orange',
                                            textDecoration: 'underline',
                                        },
                                    }}
                                    children={renderJSON(content)}
                                />
                            </TabPanel>
                        )
                    }

                    // Zpětná kompatibilita
                    if (typeof json === "string") {
                        json = JSON.parse(json)
                    }

                    return (
                        <TabPanel key={index}>
                            <Box
                                key={title}
                                mb={6}
                                sx={{
                                    'a:hover': {
                                        color: 'uat_orange',
                                        textDecoration: 'underline',
                                    },
                                }}
                                dangerouslySetInnerHTML={json ? undefined : { __html: content }}
                                children={json ? renderJSON(json.content) : undefined}
                            />
                        </TabPanel>
                    )
                })}
            </TabPanels>
        </Tabs>
    )
}