import {
    Container,
    Table,
    TableContainer,
    Tbody,
    Td,
    Th,
    Thead,
    Tr,
} from "@chakra-ui/react"
import moment from 'moment';
import {  useQueryClient,  } from "@tanstack/react-query"
import { CourseDetailsPublic } from "../../client"
import ActionsMenu from "../../components/Common/ActionsMenu"
import 'react-datetime-picker/dist/DateTimePicker.css';
import Navbar from "../../components/Common/Navbar"
import AddSechedule from "./AddSechedule";

const Sechedule = () => {
    const queryClient = useQueryClient();
    const courseDetails = queryClient.getQueryData(['course']) as CourseDetailsPublic | undefined;

  //  const showToast = useCustomToast()

    return (
        <Container maxW="full">
            <Navbar type={"Sechedule"} addModalAs={AddSechedule} value={courseDetails?.id} />
            <TableContainer>
                <Table size={{ base: "sm", md: "md" }}>
                    <Thead>
                        <Tr>
                            <Th>Date</Th>
                            <Th>Title</Th>
                            <Th>Info 1</Th>
                            <Th>Info 2</Th>
                            <Th>Actions</Th>
                        </Tr>
                    </Thead>
                    <Tbody>
                        {courseDetails?.schedule?.map((schedule) => (
                            <Tr key={schedule.id}>
                                <Td maxWidth="20px">
                                    {moment(schedule.date).utcOffset("+08:00").format('DD-MM-YYYY HH:mm')}
                                </Td>
                                <Td maxWidth="50px">
                                    {schedule.title}
                                </Td>
                                <Td maxWidth="300px">
                                    {schedule.info1}
                                </Td>
                                <Td maxWidth="300px">
                                    {schedule.info2}
                                </Td>
                                <Td>
                                    <ActionsMenu type={"Sechedule"} value={schedule} />
                                </Td>
                            </Tr>
                        ))}
                    </Tbody>
                </Table>
            </TableContainer>
        </Container>
    )
}
export default Sechedule;