import {
  Box,
  Button,
  Center,
  Drawer,
  DrawerBody,
  DrawerCloseButton,
  DrawerContent,
  DrawerOverlay,
  Heading,
  Stack,
  useDisclosure
} from "@chakra-ui/react";
import React from "react";
import {useCourses} from "../../hooks/useCourses";
import CourseCard from "../../components/course-card/CourseCard";

function AllCoupons() {
  const {isOpen, onOpen, onClose} = useDisclosure()
  const btnRef = React.useRef<HTMLButtonElement>(null)

  const courses = useCourses()

  return (
    <>
      <Button ref={btnRef} colorScheme="teal" onClick={onOpen}>
        Open
      </Button>
      <Drawer
        isOpen={isOpen}
        placement="right"
        onClose={onClose}
        size={"4xl"}
        finalFocusRef={btnRef}
      >
        <DrawerOverlay/>
        <DrawerContent>
          <DrawerCloseButton/>
          <DrawerBody>
            <Box my={9}>
              <Center>
                <Heading my={3} className={"course-list-title"} textAlign="center">Premium courses with
                  discount</Heading>
              </Center>
              <Stack spacing="10" py="5">
                {Object.entries(courses.coursesWithCoupon)
                  .sort(([_, course]) => course.courseDetails.language === 'English' ? -1 : 1)
                  .map(([url, course]) => (
                  <CourseCard key={url} course={course}/>
                ))}
              </Stack>
            </Box>
            <Box>
              <Center>
                <Heading my={3} className={"course-list-title"} textAlign="center">More free courses</Heading>
              </Center>
              <Stack spacing="10" py="5">
                {Object.entries(courses.freeCourses).map(([url, course]) => (
                  <CourseCard key={url} course={course}/>
                ))}
              </Stack>
            </Box>
          </DrawerBody>
        </DrawerContent>
      </Drawer>
    </>
  )
}

export default AllCoupons