import React from 'react'
import dayjs from 'dayjs'
import {
  Tr,
  Td,
  Box,
  Flex,
  Text,
  useBreakpointValue,
} from '@chakra-ui/react'

import { Lesson } from '../../../__data__/model'

import { Item } from './item'

type LessonItemProps = {
  date: string
  lessons: Lesson[]
  isTeacher: boolean
  courseId: string
  setlessonToDelete(lesson: Lesson): void
  setEditLesson?(lesson: Lesson): void
}

export const LessonItems: React.FC<LessonItemProps> = ({
  date,
  lessons,
  isTeacher,
  courseId,
  setlessonToDelete,
  setEditLesson,
}) => {
  // Использование useBreakpointValue для определения мобильного отображения
  const isMobile = useBreakpointValue({ base: true, md: false })

  // Мобильное отображение
  if (isMobile) {
    return (
      <>
        {date && (
          <Box 
            p={3} 
            mb={2} 
            bg="gray.100" 
            borderRadius="md"
            _dark={{ bg: "gray.700" }}
          >
            <Text fontWeight="bold">{dayjs(date).format('DD MMMM YYYY')}</Text>
          </Box>
        )}
        {lessons.map((lesson) => (
          <Box 
            key={lesson.id} 
            p={3} 
            mb={2} 
            borderRadius="md" 
            boxShadow="sm"
            borderLeft="4px solid"
            borderLeftColor="cyan.500"
          >
            <Item
              {...lesson}
              setlessonToDelete={() => setlessonToDelete(lesson)}
              setEditLesson={setEditLesson ? () => setEditLesson(lesson) : undefined}
              courseId={courseId}
              isTeacher={isTeacher}
              isMobile={true}
            />
          </Box>
        ))}
      </>
    )
  }

  // Стандартное отображение для планшетов и больших экранов
  return (
    <>
      {date && (
        <Tr>
          <Td colSpan={isTeacher ? 5 : 3}>
            {dayjs(date).format('DD MMMM YYYY')}
          </Td>
        </Tr>
      )}
      {lessons.map((lesson) => (
        <Item
          key={lesson.id}
          {...lesson}
          setlessonToDelete={() => setlessonToDelete(lesson)}
          setEditLesson={setEditLesson ? () => setEditLesson(lesson) : undefined}
          courseId={courseId}
          isTeacher={isTeacher}
          isMobile={false}
        />
      ))}
    </>
  )
}