import {
    Container,
    Heading,
    Tab,
    TabList,
    TabPanel,
    TabPanels,
    Tabs,
} from "@chakra-ui/react"
import { useQuery } from "@tanstack/react-query"
import { createFileRoute } from "@tanstack/react-router"
import { CoursesService } from "../../../client"

import CourseDetails from "../../../components/Courses/CourseDetails"
import CourseImages from "../../../components/Courses/CourseImages"
import CourseInfoImages from "../../../components/Courses/CourseInfoImages"
import Sechedule from "../../../components/Courses/Sechedule"

const tabsConfig = [
    { title: "Course Details", component: CourseDetails },
    { title: "Course Images", component: CourseImages },
    { title: "Course Info Images", component: CourseInfoImages },
    { title: "Schedule", component: Sechedule },

]

export const Route = createFileRoute('/_layout/Courses/$id/EditCourse')({
    component: EditCourse,
})

function getcoursesQueryOptions(id: string) {
    return {
        queryFn: () =>
            CoursesService.readCourse({ id: id }),
        queryKey: ["course"],
    }
}

function EditCourse() {

    const {
        data: course,
    } = useQuery(
        {
            ...getcoursesQueryOptions(Route.useParams().id),
            //   placeholderData: (prevData) => prevData,
        }
    )
    console.log(course)
    const finalTabs = tabsConfig.slice(0, 4)
    return (
        <Container maxW="full">
            <Heading size="lg" textAlign={{ base: "center", md: "left" }} py={12}>
                Courses
            </Heading>
            <Tabs variant="enclosed">
                <TabList>
                    {finalTabs.map((tab, index) => (
                        <Tab key={index}>{tab.title}</Tab>
                    ))}
                </TabList>
                <TabPanels>
                    {finalTabs.map((tab, index) => (
                        <TabPanel key={index}>
                            {<tab.component />}
                        </TabPanel>
                    ))}
                </TabPanels>
            </Tabs>
        </Container>
    )
}

